black background missing in firefox 3 and opera

vinpkl

hi all

i have two column div structure in which i have applied black background colour to the main div which holds the two columns (left and right divs).

In internet explorer 7 the structure shows black colour in right side fine but its missing in Firefox 3 and opera 9. why.

please copy and paste the code in your editor and check. the html file is also attached.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

#main{

width:946px;

margin:0px auto;

background-color:#000000; 

height:100%; 

}

#left{

width:201px;

float:left;

height:100%;

background-color:#FFFF00;

}

#right{

background-color:#FF00FF;

width:725px;

padding:10px;

}

</style>

</head>
 
<body style="background-color:#FF0000">

<!-- main starts -->

<div id="main">
 
<!-- left starts -->

<div id="left">

<p style="padding-left:30px; line-height:22px; margin:0px;">

<a href="one.html">Nokia</a> <br />

 Samsung <br />

 HTC <br />

 LG <br />

Sony Ericsson<br />

 Samsung <br />

 HTC <br />

 LG <br />

 Sony Ericsson<br />

 Samsung <br />

 HTC <br />

 LG <br />

 Samsung <br />

 HTC <br />

 LG <br />

 Sony Ericsson</p>

</div>

<!-- left ends -->
 
<!-- right starts -->

<div id="right" style="float:right">

<p>hello how are you</p>

<p>hello how are you</p>

<p>hello how are you</p>

<p>hello how are you</p>

</div>

<!-- right ends -->
 
</div>

<!-- main ends -->

</body>

</html>

vineet

drhowarddrfine

Never, ever use IE as a reference for how anything should work. It's 11 years behind all other browsers in modern standards and practices and the worst browser on the planet. Note that the more modern browsers, Firefox and Opera (Safari, too), all work the same.

The problem, as it ALWAYS will be, is IE. Parent elements are NEVER to expand to contain floated elements. This is one of the hundreds of bugs and missing properties you are seeing in IE.

To force the modern browsers to act like IEs bug, add 'overflow:auto' to #main.

vinpkl

hi drhowarddrfine

thanks for the reply.

overflow:auto worked great. its solved now.

vineet

black background missing in firefox 3 and opera

re: black background missing in firefox 3 and opera

re: black background missing in firefox 3 and opera

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about