PDA

View Full Version : CSS Problem - Menu Not Stretching Page

bumcheekcity
03-17-2008, 09:21 PM
http://pegasuspine.lenandrews.co.uk/

I've got the above page, of the following layoutish


<div id="wrapper">
<div id="header" />
<div id="menu" />
<div id="main" />
<div id="footer" />
</div>


I want, clearly, the footer to display at the bottom of the page, and for the menu and the main bit to stretch the page. Currently, the main bit stretches the page when there's too much content, but the menu doesnt. Can anyone help me on how to do this?
jcdevelopment
03-17-2008, 09:47 PM
first add this to your css


* {
margin:0px;
padding:0px;
}


then change this div

#mainWrapper {
position: relative;
min-height: 100%;
width:100%
margin: 50px auto 50px auto;
padding: 0px;
background-color:#FFFFFF;
border:1px solid black;
}

that will stretch the whole page, check your menu on FireFox though!!
harbingerOTV
03-17-2008, 09:48 PM
add clear: both; to your css for your footer.
sobrien79
03-17-2008, 09:50 PM
Fix your doctype. You need the full path to the dtd.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Also, for a doctype to work correctly, it has to the first non-white space character in the page. The comment tags before the doctype turn it off in IE and consequently put it into quirks mode.

Also, it's never a good idea to put SQL statements in any of your pages that are compiled by the web server (jsp, php, asp) and it is 10 times worse to put them in comment tags in your page.
bumcheekcity
03-17-2008, 09:53 PM
add clear: both; to your css for your footer.

Thankyou very much, this worked perfectly.
Apostropartheid
03-17-2008, 10:50 PM
<div id="wrapper">
<div id="header" />
<div id="menu" />
<div id="main" />
<div id="footer" />
</div>

End tag minimization on a non-empty element in a bad idea. Even though it's a valid XML statement, you should close the tag for compatiblity with SGML & HTML parsers.