I have a simple nested div layout, with backgrounds controlled in CSS. Why doesn't the bg color stretch down to encompass the nested divs? Here is my page code:
<body>
<div id="wrapper">
<div id="page">
<div id="header">
This is the Header
</div>
<div id="navigation">
Link 1 | Link 2 | Link 3 | Link 4
</div>
<div id="content_wrap">
<div id="left_col">
<span class="head2">Lorem ipsum</span> <br />
<br />
Dolor sit amet, consectetuer adipiscing elit. Vestibulum semper dignissim mauris. Aenean lacinia nonummy pede. Sed sem justo, suscipit non, ultrices ac, vehicula ut, leo. Nam at erat. Maecenas nonummy auctor velit. Suspendisse eu justo vitae justo bibendum rutrum. Vestibulum pharetra elit sit amet dolor. Nunc est. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla neque. Vivamus elementum, elit eget adipiscing pulvinar, arcu orci auctor pede, dapibus hendrerit erat augue in mauris. Fusce metus arcu, luctus eget, viverra eget, interdum sed, dolor. Nunc malesuada dui vitae enim. Aliquam et ligula.<br /><br />
Integer facilisis, risus interdum fermentum malesuada, ligula ante tristique dolor, non elementum felis augue at pede. Sed vitae justo. Sed nibh dui, hendrerit id, cursus eu, porta eget, velit. Praesent euismod, ipsum et bibendum dapibus, pede ligula iaculis purus, quis porta urna tortor in mi. Sed tempor volutpat purus. Cras adipiscing. Aenean in justo. Morbi et velit. Sed arcu. In augue lectus, vestibulum quis, placerat id, varius eu, dolor. Nulla facilisi. Nunc fringilla, ante et feugiat tempus, pede dui tincidunt justo, ac accumsan magna erat quis elit. Nam dictum. Duis justo. Nulla at justo nec velit condimentum sagittis.
</div>
<!-- end left_col div -->
<div id="right_col">
<span class="head2">Muisque varius pulvinar odio<br />
<br />
</span>Quisque sapien felis, mollis at, lobortis at, rhoncus ut, leo. Nullam ac erat. Nulla purus dui, malesuada quis, congue egestas, auctor eget, orci. Mauris non nisl non mauris fringilla viverra. Etiam tempus tempor sem. Praesent dictum commodo pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras nisl justo, volutpat et, consequat in, luctus ac, tellus. Nulla porta lorem non nisi. Ut gravida tellus in orci. Nullam vulputate erat sed felis. Morbi leo risus, adipiscing sed, ultrices vitae, blandit eu, orci. Proin nec lectus sed dolor sodales tristique. Praesent facilisis risus at augue. Nullam porta diam ac turpis.<br /><br />
Proin tempus molestie arcu. Pellentesque imperdiet nulla eu lacus. Praesent tempus lorem ut nulla. Nulla quis nibh a mauris ultricies sagittis. Quisque pharetra quam vel elit ornare ultricies. Pellentesque pulvinar feugiat erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis cursus massa at orci. In hac habitasse platea dictumst. Integer placerat, nulla ut feugiat suscipit, orci tortor nonummy ipsum, quis ullamcorper massa erat et nibh. Maecenas euismod lacinia metus. Phasellus ut velit. Nulla mattis quam sit amet odio. Quisque in purus quis velit lacinia pellentesque. Praesent mattis, purus vel venenatis feugiat, pede velit lobortis erat, dictum rhoncus pede tortor sit amet mauris. Nunc sit amet ipsum ut tortor consequat auctor. Fusce imperdiet rutrum enim.<br /><br />
Fusce molestie faucibus neque. Nam mi. Morbi sodales blandit erat. Nulla sed ligula eget metus porta eleifend. Sed nec libero. Pellentesque porttitor nulla sit amet metus. Proin sit amet nisi ac nulla euismod porttitor. Nam sit amet velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut et tellus sit amet enim sodales varius. Integer scelerisque, nibh in ultrices elementum, ipsum sapien ornare eros, eget tempor felis odio id est. Curabitur ornare orci vitae risus. Pellentesque ac nunc. Suspendisse tincidunt mattis magna. In tempor sagittis pede. Cras velit eros, hendrerit eu, malesuada in, tincidunt ut, ligula.
</div>
<!-- end right_col div -->
</div>
<!-- end content_wrap div -->
</div>
<!-- end page div -->
</div>
<!-- end wrapper div -->
</body>
and here is my css code:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
text-align: center;
font-size: 12px;
color: #666633;
}
#wrapper {
background-color: #333333;
position: relative;
width: 780px;
margin-right: auto;
margin-left: auto;
}
#page {
background-color: #FFFFFF;
position: relative;
width: 760px;
margin-right: auto;
margin-left: auto;
}
#header {
font-size: 2em;
font-weight: bold;
background-color: #CCCC99;
padding: 10px;
margin: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333300;
}
#navigation {
color: #FFFFFF;
background-color: #666633;
display: block;
padding-top: 10px;
padding-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333300;
text-align: left;
padding-left: 20px;
width: 740px;
}
#content_wrap {
display: block;
}
#left_col {
width: 170px;
float: left;
text-align: left;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #333300;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
}
#right_col {
float: left;
width: 500px;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
text-align: left;
}
.head2 {
font-size: 1.2em;
color: #333300;
}You know, it's always helpful to post a live link to save us having to piece your page together...You have no style info here and background is not inherited for that element:
#content_wrap {
display: block;
}Apologies for the code posting faux pas! I have found a solution for those interested: overflow: hidden
for the container
#content_wrap
pulls the background down to encompass the floats within. Works for borders too.Check out this link:
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/clearing.htmlSetting">http://www.quirksmode.org/css/clearing.htmlSetting</a><!-- m --> the overflow is often the way to fix height related problems.
<body>
<div id="wrapper">
<div id="page">
<div id="header">
This is the Header
</div>
<div id="navigation">
Link 1 | Link 2 | Link 3 | Link 4
</div>
<div id="content_wrap">
<div id="left_col">
<span class="head2">Lorem ipsum</span> <br />
<br />
Dolor sit amet, consectetuer adipiscing elit. Vestibulum semper dignissim mauris. Aenean lacinia nonummy pede. Sed sem justo, suscipit non, ultrices ac, vehicula ut, leo. Nam at erat. Maecenas nonummy auctor velit. Suspendisse eu justo vitae justo bibendum rutrum. Vestibulum pharetra elit sit amet dolor. Nunc est. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla neque. Vivamus elementum, elit eget adipiscing pulvinar, arcu orci auctor pede, dapibus hendrerit erat augue in mauris. Fusce metus arcu, luctus eget, viverra eget, interdum sed, dolor. Nunc malesuada dui vitae enim. Aliquam et ligula.<br /><br />
Integer facilisis, risus interdum fermentum malesuada, ligula ante tristique dolor, non elementum felis augue at pede. Sed vitae justo. Sed nibh dui, hendrerit id, cursus eu, porta eget, velit. Praesent euismod, ipsum et bibendum dapibus, pede ligula iaculis purus, quis porta urna tortor in mi. Sed tempor volutpat purus. Cras adipiscing. Aenean in justo. Morbi et velit. Sed arcu. In augue lectus, vestibulum quis, placerat id, varius eu, dolor. Nulla facilisi. Nunc fringilla, ante et feugiat tempus, pede dui tincidunt justo, ac accumsan magna erat quis elit. Nam dictum. Duis justo. Nulla at justo nec velit condimentum sagittis.
</div>
<!-- end left_col div -->
<div id="right_col">
<span class="head2">Muisque varius pulvinar odio<br />
<br />
</span>Quisque sapien felis, mollis at, lobortis at, rhoncus ut, leo. Nullam ac erat. Nulla purus dui, malesuada quis, congue egestas, auctor eget, orci. Mauris non nisl non mauris fringilla viverra. Etiam tempus tempor sem. Praesent dictum commodo pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras nisl justo, volutpat et, consequat in, luctus ac, tellus. Nulla porta lorem non nisi. Ut gravida tellus in orci. Nullam vulputate erat sed felis. Morbi leo risus, adipiscing sed, ultrices vitae, blandit eu, orci. Proin nec lectus sed dolor sodales tristique. Praesent facilisis risus at augue. Nullam porta diam ac turpis.<br /><br />
Proin tempus molestie arcu. Pellentesque imperdiet nulla eu lacus. Praesent tempus lorem ut nulla. Nulla quis nibh a mauris ultricies sagittis. Quisque pharetra quam vel elit ornare ultricies. Pellentesque pulvinar feugiat erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis cursus massa at orci. In hac habitasse platea dictumst. Integer placerat, nulla ut feugiat suscipit, orci tortor nonummy ipsum, quis ullamcorper massa erat et nibh. Maecenas euismod lacinia metus. Phasellus ut velit. Nulla mattis quam sit amet odio. Quisque in purus quis velit lacinia pellentesque. Praesent mattis, purus vel venenatis feugiat, pede velit lobortis erat, dictum rhoncus pede tortor sit amet mauris. Nunc sit amet ipsum ut tortor consequat auctor. Fusce imperdiet rutrum enim.<br /><br />
Fusce molestie faucibus neque. Nam mi. Morbi sodales blandit erat. Nulla sed ligula eget metus porta eleifend. Sed nec libero. Pellentesque porttitor nulla sit amet metus. Proin sit amet nisi ac nulla euismod porttitor. Nam sit amet velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut et tellus sit amet enim sodales varius. Integer scelerisque, nibh in ultrices elementum, ipsum sapien ornare eros, eget tempor felis odio id est. Curabitur ornare orci vitae risus. Pellentesque ac nunc. Suspendisse tincidunt mattis magna. In tempor sagittis pede. Cras velit eros, hendrerit eu, malesuada in, tincidunt ut, ligula.
</div>
<!-- end right_col div -->
</div>
<!-- end content_wrap div -->
</div>
<!-- end page div -->
</div>
<!-- end wrapper div -->
</body>
and here is my css code:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
text-align: center;
font-size: 12px;
color: #666633;
}
#wrapper {
background-color: #333333;
position: relative;
width: 780px;
margin-right: auto;
margin-left: auto;
}
#page {
background-color: #FFFFFF;
position: relative;
width: 760px;
margin-right: auto;
margin-left: auto;
}
#header {
font-size: 2em;
font-weight: bold;
background-color: #CCCC99;
padding: 10px;
margin: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333300;
}
#navigation {
color: #FFFFFF;
background-color: #666633;
display: block;
padding-top: 10px;
padding-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333300;
text-align: left;
padding-left: 20px;
width: 740px;
}
#content_wrap {
display: block;
}
#left_col {
width: 170px;
float: left;
text-align: left;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #333300;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
}
#right_col {
float: left;
width: 500px;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
text-align: left;
}
.head2 {
font-size: 1.2em;
color: #333300;
}You know, it's always helpful to post a live link to save us having to piece your page together...You have no style info here and background is not inherited for that element:
#content_wrap {
display: block;
}Apologies for the code posting faux pas! I have found a solution for those interested: overflow: hidden
for the container
#content_wrap
pulls the background down to encompass the floats within. Works for borders too.Check out this link:
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/clearing.htmlSetting">http://www.quirksmode.org/css/clearing.htmlSetting</a><!-- m --> the overflow is often the way to fix height related problems.