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

Question

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://goo.gl/Ml2FIo

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 */

#main {

    /*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;

}

#main ul {

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

#main ul li {

    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;

}

#main ul li a {

    text-decoration: none;
    color: #ffffff;

}

/*
#main li a:hover{

    opacity: 0.8;

}
*/

/*SIDE NAVIGATION*/

#side {

    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;

}

#side a {

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

}


body {

    background-image: url("http://commentnation.com/backgrounds/images/argyle_pattern_background_seamless_light_gray.gif");
    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 */

#title-img {

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


}

EDIT 1:

I just realized that the #main element is actually visible on a Windows Chrome, but not on Mac Chrome or Safari (which I've been using) while still having the 0px x 0px dimensions.

Answer 1

You can use flex. It's a nice and easy way to set width, margins, paddings for things.

Here's a wonderful "Complete guide to flexbox": http://css-tricks.com/snippets/css/a-guide-to-flexbox/

You could do something like this:

 nav { display: flex; flex: 1; /* you can set some width if you want width: 400px; */ background-color: #eee; } nav ul { margin: 0; padding: 0; display: flex; flex: 1; list-style-type: none; background-color: #ddd; border: 1px solid #00f; } nav ul li { display: flex; flex: 1; padding: 5px 10px; margin-right: 10px; background-color: #bbb; border: 1px solid #f00; } nav ul li:last-child { margin-right: 0; } 

 <nav> <ul> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> <li>dddd</li> <li>eeee</li> </ul> </nav> 

You can change width of nav to whatever you like, or not set it at all and give the nav flex: 1 for "100%".