Alexancho Posted May 11, 2010 Share Posted May 11, 2010 I creating a simple test here:http://websites.awardspace.biz/test.htmlEverything fine in IE, but the problem is that in Firefox we can't see the container box.The "float:left;" of a sidebar has probably some effect on it, but i don't understand why.The code ids: <!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=UTF-8"/> <title> test </title><style type="text/css">*{ padding:0; margin:0; }#container { margin:0 auto; background:#408080; width:880px;}#sidebar { float:left; background:#6699FF; margin:20px; width:300px;}#maincontent { float:left; margin:20px; width:460px; border: 1px solid red;}#lbox { margin:0 auto; background:#00FF00; width:220px;}#rbox { margin:0 auto; background:#333399; width:220px;}</style> </head> <body> <div id="container"> <!-- container--> <div id="sidebar"> <!-- left sidebar --> <div id="lbox"> <p>Donec tortor nibh, dignissim vitae dictum a, accumsan ut libero. Fusce vitae est lacus, at feugiat lorem. Nunc id molestie metus. Suspendisse vestibulum, augue sit amet fermentum condimentum, lacus tortor ullamcorper felis, eget dictum orci ante eu erat. Nulla hendrerit nulla ac lacus luctus iaculis. Aliquam lobortis luctus mi, in porta risus consequat et. Cras quis velit nisl. </p> </div> </div> <!-- end left sidebar --> <div id="maincontent"> <!-- maincontent --> <div id="rbox" class=""> <p>Nullam imperdiet luctus velit ut sollicitudin. Aliquam consequat cursus laoreet. Curabitur sollicitudin, felis vel sagittis hendrerit, sapien eros tristique odio, ut vehicula purus orci eget est. Etiam at tortor massa, eu pretium urna. Cras at eros neque, ut gravida neque. Mauris tempus, elit eget ultrices elementum, ligula tellus cursus urna, quis tincidunt nisi orci nec enim. Proin sit amet pretium dolor. Maecenas in est ac elit egestas sodales. Nam fermentum eros in ipsum cursus hendrerit. Aenean in mi et arcu laoreet ultrices a mattis urna. Etiam ultricies erat in risus suscipit bibendum. </p> </div> </div> <!-- end maincontent --> </div> <!-- end container--> </body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted May 11, 2010 Share Posted May 11, 2010 Its the floats, as you suspected. A floated element is not taken into account when calculating a parent container's size. Try adding overflow: auto; to your container class. Link to comment Share on other sites More sharing options...
Alexancho Posted May 11, 2010 Author Share Posted May 11, 2010 Its the floats, as you suspected. A floated element is not taken into account when calculating a parent container's size. Try adding overflow: auto; to your container class.Thank You very much!It works. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.