vinpkl Posted July 26, 2009 Share Posted July 26, 2009 hi alli 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. <!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 Link to comment Share on other sites More sharing options...
Ingolme Posted July 26, 2009 Share Posted July 26, 2009 Because Internet Explorer is rendering it wrong.Your height: 100% declaration won't do anything if it doesn't know what to base 100% from. It can't find a specified height on its parent so it is not giving any height.You should define a height for the element's ancestor nodes.The other solution is to remove the height declaration and apply oveflow: auto to the <div> instead. This should make the #main div wrap around the floated elements inside it. Link to comment Share on other sites More sharing options...
vinpkl Posted July 26, 2009 Author Share Posted July 26, 2009 hi Ingolmethanks for the reply.overflow auto really worked great.vineet Because Internet Explorer is rendering it wrong.Your height: 100% declaration won't do anything if it doesn't know what to base 100% from. It can't find a specified height on its parent so it is not giving any height.You should define a height for the element's ancestor nodes.The other solution is to remove the height declaration and apply oveflow: auto to the <div> instead. This should make the #main div wrap around the floated elements inside it. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.