style="background-color:#f0f0f0" doesnt work with 2nd (middle) div but does with 3rd (inner) div

rain13 · April 23, 2011

I don't get it. When I write my html like that:

	<div style="overflow:auto;">		<div style="background-color:#f0f0f0">			<div class="postbody" >

style="background-color:#f0f0f0" does nothing but if I write my code like that:

	<div style="overflow:auto;">		<div>			<div class="postbody" style="background-color:#f0f0f0">

then style="background-color:#f0f0f0" works perfectly.Problem is that if I code it like that, only part that contains post it self gets background color, but info about post creator at the right side doesn't get any background color at all.I don't want to use style="background-color:#f0f0f0" with 1st (outer) div because this would make all posts appear in same color, but I want to have some posts with grey background and others with white background.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style TYPE="text/css">.postprofile {	margin: 5px 0 10px 0;	min-height: 80px;	color: #00;	border-left: 1px solid #000000;	width: 22%;	float: right;	display: inline;}.postbody {	padding: 0;	line-height: 1.48em;	color: #333333;	width: 76%;	float: left;	clear: both;}hr.divider {	float: none;	display: none;}/* Poster profile icons----------------------------------------*//* Rollover state */ul.profile-icons li {	float: left;	margin: 0 6px 3px 0;	background-position: 0 100%;}/* Positioning of moderator icons */.postbody ul.profile-icons {	float: right;	width: auto;	padding: 0;}</style></head><body>	<div style="overflow:auto;">		<div style="background-color:#f0f0f0">			<div class="postbody" >				<ul class="profile-icons"></ul>				<h3>file</h3>Posted by rain on 2011 Apr 30 22:53				<div>test</div>			</div>			<dl class="postprofile">				<dd style="margin: 0px 5px 0px 5px">rain<br> Administrator<br> Posts: 0<br> Joined: 31 Mar 2011<br>MSN: <br>Email: </dd>			</dl>			<hr class="divider" />		</div>		<!-- COMMENT END -->	<br></div>  <!-- closes the div with overflow:auto --></body></html>

jeffman · April 23, 2011

postbody is floating, so its container div has no physical height. Add overflow:hidden to the container div and it will behave as expected.

rain13 · April 23, 2011

postbody is floating, so its container div has no physical height. Add overflow:hidden to the container div and it will behave as expected.

thanks for quick reply. It helped me. Do you know why my code leaves about 5 px wide white border around it? why doesn't it that div get dawn at very top of browser's html area?.

jeffman · April 23, 2011

By default, all browsers leave a little margin around the body element. Most developers reset it using CSS in one of two ways:1

body {   margin: 0;}

This next bit does the same to every element on your page, including the body. This is useful because different browsers use different properties to create space and sometimes different values. Resetting them all to 0 makes all browsers behave the same, and reminds you that if you want to add space to an element, you have to do it yourself. This is the most common technique.2

* {   padding: 0;   margin: 0;}

Sign In

style="background-color:#f0f0f0" doesnt work with 2nd (middle) div but does with 3rd (inner) div

Recommended Posts

rain13

Link to comment

Share on other sites

jeffman

Link to comment

Share on other sites

rain13

Link to comment

Share on other sites

jeffman

Link to comment

Share on other sites

Archived

Browse

Activity