Sign in to follow this  
Liam M

[web] CSS "height:auto" Problems in Mozilla Firefox

Recommended Posts

Hi there, I'm still a bit new to CSS, so sorry if this is an overly simple issue. Im working on a little website, and I am having trouble with the div that contains my page not resizing to fit all the elements it containts in firefox, despite having its height property set to auto. What am I missing here? The code for my stylesheet (style.css):

body
{

	font-family: Verdana, Arial, Helvetica, sans-serif;

	padding-top:30px;
	padding-bottom:30px;
}

#Main
{

	width: 90%;
	height: auto;
	border-style:solid;
	border-width:1px;

	min-height:100%;

	margin-left: auto;
	margin-right: auto;

	background-color: Red;

	position:relative;

	background-color:rgb(255,0,0);

}

.Banner
{
	width: 100%;
	height: 120px;

	margin-left: auto;
	margin-right: auto;

	border-style:solid;
	border-width:1px;

	float:center;

	background-color:rgb(255,255,100);

	margin-top: 0px;

}

.Footer
{
	width: 100%;
	height: 120px;

	margin-left: auto;
	margin-right: auto;
	
	border-style:solid;
	border-width:1px;

	float:center;

	background-color:rgb(255,255,100);

	margin-top: 10px;
	margin-bottom: 0px;

}


.MenuLeft,
.MenuRight,
.PageDiv
{
	padding: 0px 0px 0px 0px;
	margin-top: 10px;

	background-image:url(style/Title.jpg);
	background-repeat: repeat-x;
	background-position: top left;
}

.MenuLeft,
.MenuRight
{
	width: 16%;
	height: auto;

	border-style:solid;
	border-width:1px;

	background-color:rgb(255,255,100);

	min-width: 100px;
}


.MenuLeft
{
	float:left;
}

.MenuRight
{
	float:Right;
}

.PageDiv
{
	width: 60%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;

	border-style:solid;
	border-width:1px;

	background-color:rgb(255,255,100);

}




...And my HTML document(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<htmL>

   <head>

	<title>CSS Playground</title>
	
	<link rel="stylesheet" media="screen" type="text/css" href="Style.css" />

   </head>


   <body>


	<div id ="Main">

		<div class = "Banner">
		
				<h1>M M M M M</h1>

		</div>


		<div class = "MenuLeft">



					<h1>M M M M M M M M M M M M M M M M M M M M M M M M M M M M :</h1>


		</div>

		<div class = "MenuRight">
		

	
					<h1>M M M M M M M M M M M M M M M M M M M M M M M M M M M M :</h1>


		</div>

		<div class = "PageDiv">


				
	
					<h1>M M M M M M M M M M M M M M M M M M M M M M M M M M M M :</h1>

		</div>


		

		<div class = "Footer">
		
				<h1>M M M M M</h1>

		</div>

	</div>


   </body>


</html>


Its difficult to explain, but a comparison between what the page looks like in Firefox(incorrect), to what it looks like in IE6 (what I want), makes it pretty obvious (in Firefox 1.5, the menus are flowing out over the footer, which isn't what I want). All help appreciated, Liam M.

Share this post


Link to post
Share on other sites
(That <htmL> shouldn't be there.)

Opera gives the same output as Firefox, so the difference seems likely to be buggy behaviour in IE. You can force the footer to be below the floating menus by adding .Footer { clear: both; } which makes it look about the same as in IE. And then you just need to fiddle with the margins until the spacing is correct (since IE (at least IE6) seems to do that differently too).

Share this post


Link to post
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

Sign in to follow this