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
Post a Comment