Div background won't display with nested children

Question

I'm trying to create my first website, and I'm wanting to make a section in which the recent posts are on the left, and the sidebar is on the right. I'm not having any problems with positioning them but the problem is that the main div isn't drawing the background for it.

If I put any raw-text in the div, it will draw the background correctly for the raw-text, but not for any of the <div>'s inside of it.

Please note, in the code snipit the text is white, and body has a black background, the page-content div is supposed to have a grey background #666 but it's not showing up.

body {
  background: #000;
}

/* Page Content */
#page-content {
 background:#666;
 color: #FFF;
 opacity: .8;
}

#recent-updates {
 width: 75%;
 float: left;
 
}

#sidebar-right {
 width: 25%;
 float: right;
}

<html>
  
  <body>
    <div id='page-content'>
        <div id='recent-updates'>
            OneOneOneOneOneOneOne
        </div> <!-- recent-updates -->
                
        <div id='sidebar-right'>
            TwoTwoTwoTwoTwoTwoTwo
        </div> <!-- sidebar-right -->
    </div> <!-- page-content-->
  </body>

</html>

score 2 · Accepted Answer · edited May 23 '17 at 12:22

Because you have floated the elements inside #page-content, you have taken them out of the normal flow of the page. #page-content has no contents in the normal flow, so it collapses on itself and you can't see the background colour given to it.

You can clear your floated elements with an overflow trick:

body {
    background: #000;
}
#page-content {
    background:#666;
    color: #FFF;
    opacity: .8;
    overflow: hidden;
}
#recent-updates {
    width: 75%;
    float: left;
}
#sidebar-right {
    width: 25%;
    float: right;
}

<html>
<body>
    <div id='page-content'>
        <div id='recent-updates'>
            OneOneOneOneOneOneOne
        </div> <!-- recent-updates -->
                
        <div id='sidebar-right'>
            TwoTwoTwoTwoTwoTwoTwo
        </div> <!-- sidebar-right -->
    </div> <!-- page-content-->
  </body>
</html>

If you aren't able to apply overflow: hidden to #page-content, see other float-clearing methods.

Huh, very neat, I had no idea that using "float" would take them out of the pages 'flow' and figured it was just like aligning it to the left/right of the screen in order. Thanks for the answer. — Hobbyist, Nov 27 '14 at 13:14
@Christian.tucker It's a common misunderstanding I would have thought. Glad to have helped. — George, Nov 27 '14 at 13:15

score 0 · Answer 2 · answered Nov 27 '14 at 13:38

Also you can do this just add div with style clear both floats so it will automatically settled.

  body {
        background: #000;
    }
    #page-content {
        background:#666;
        color: #FFF;
        opacity: .8;
        overflow: hidden;
    }
    #recent-updates {
        width: 75%;
        float: left;
    }
    #sidebar-right {
        width: 25%;
        float: right;
    }
  .clear
{ 
clear:both;
}


    <html>
    <body>
        <div id='page-content'>
            <div id='recent-updates'>
                OneOneOneOneOneOneOne
            </div> <!-- recent-updates -->

            <div id='sidebar-right'>
                TwoTwoTwoTwoTwoTwoTwo
            </div> <!-- sidebar-right -->

    <div class="clear"> </div>
        </div> <!-- page-content-->
      </body>
    </html>

Div background won't display with nested children

2 Answers2