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.
