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.
vineet
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.
Code:
<!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>
Comment