CSS: My Parent container has dimensions 0px 0px, how can I have it automatically set to the child container's dimensions?

Vote count:

0

I have a css element #main that for some reason is set to 0px x 0px (it was working earlier, I'm not sure what changed.) when #main ul is at 800px x 39px, so therefore the entire element is hidden

Is there a way to have the dimensions of #main automatically change without having to hard-code it in?

I've tried:

overflow: hidden, auto
float: left, center, right
width: 100%
display: block, inline-block, inline

but none of them work.

Here's the link to the html page: http://ift.tt/1CZRRzi

here's the css code:

/* HEADERS*/

h1 {

margin-top: 80px;
text-align: center;
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 50px;
font-weight: 200;
color: #212121;

}

/* MAIN NAVIGATION */

/*width: 800px;
height: 100px;*/
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #fa5858;
position: fixed;
top: 0;
left: 0;
text-align: center;
overflow: auto;
display: inline-block;

}

/*overflow: hidden;*/
margin: 0 auto;
padding: 0;
position: fixed;
width: 800px;

}

width: 100px;
display: block;
padding: 10px 20px;
text-align: center;
float: left;
list-style: none;
background-color: #FA5858;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;

}

text-decoration: none;
color: #ffffff;

}

/*

opacity: 0.8;

} */

/SIDE NAVIGATION/

min-width: 100px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    background-color: #ffffff;
    position: fixed;
    top: 0px;
right: 0px;
text-align: center;

overflow: hidden;
margin: 0 auto;
padding: 0;

    display: inline-block;
    border: 1px solid #fcacac;
padding: 0px 10px;
    text-align: center;
    float: left;
    list-style: none;

}

font-size: .75em;
text-decoration: none;
color: #505050;
line-height: 40px;

}

body {

background-image: url("http://ift.tt/1DGF57m");
background-attachment: fixed;

}

/* PARAGRAPH */

section {

background-color: #ffffff;
width: 600px;
margin: 0 auto;
/*margin-: 50px 150px 50px 150px;*/
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 1em;
font-weight: lighter;
line-height: 30px;
padding: 20px 50px;
border: 1px solid #fcacac;
text-align: justify;
text-justify: inter-word;
color: #393939;

}

/* FOOTER */

footer {

display: block;
background-color: #ffffff;
padding: 30px 100px;
margin-top: 150px;
position: relative;
/*width: 100%;
bottom: -10px;
left: -10px;*/
border-top: 1px solid #e6e6e6;

}

/* TITLE IMAGE */

/*position: relative;i*/
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: auto;

}

asked 1 min ago

Butterfly_123

1

CSS: My Parent container has dimensions 0px 0px, how can I have it automatically set to the child container's dimensions?