html - Div background won't display with nested children -


i'm trying create first website, , i'm wanting make section in recent posts on left, , sidebar on right. i'm not having problems positioning them problem main div isn't drawing background it.

if put raw-text in div, draw background correctly raw-text, not of <div>'s inside of it.

please note, in code snipit text white, , body has black background, page-content div supposed have grey background #666 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>

because have floated elements inside #page-content, have taken them out of normal flow of page. #page-content has no contents in normal flow, collapses on , can't see background colour given it.

you can clear floated elements 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 aren't able apply overflow: hidden #page-content, see other float-clearing methods.


Comments

Popular posts from this blog

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -