Jump to content

Some problem in viewing in Firefox


Alexancho
 Share

Recommended Posts

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

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

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...