Jump to content

Black Background Missing In Firefox And Opera


vinpkl
 Share

Recommended Posts

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

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.

Edited by Ingolme
Link to comment
Share on other sites

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...