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>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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments