Fri, 2009-07-24 22:39
i am working on a practice web site and im having problems. i set the #document div set to min-height:400px; but then the when i input content that overpasses 400px in the #col div it goes over the #footer div. and if in #document i set height to a specified height it works but then i have to do that for every page specifically. i hope you can help and i explained it ok. here's the code
also the way i have it it works great on IE but on chrome and FF it doesnt
<!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>Untitled Document</title> <link rel="stylesheet" type="text/css" href="9.css" /> </head> <body> <div id="Document"> <div id="Header"> <div id="Top_Right"> <ul> <li><a href="#">Terms of Use</a></li> <li><a href="#">Privacy Use</a></li> </ul> </div> <div id="Logo"><a href="#"><img src="Images/guitar102.png" alt="guitar102" /></a></div> </div> <div id="Nav"><ul> <li><a href="#"><img src="Images/home.png" /></a></li> <li><a href="#"><img src="Images/links.png" /></a></li> <li><a href="#"><img src="Images/about.png" /></a></li> <li><a href="#"><img src="Images/contact.png" /></a></li> </ul> <hr /> </div> <div id="Side_Nav"> <ul> <li><a href="#"><img src="Images/less.png" /></a></li> <li><a href="#"><img src="Images/art.png" /></a></li> <li><a href="#"><img src="Images/his.png" /></a></li> <li><a href="#"><img src="Images/news_.png" /></a></li> <li><a href="#"><img src="Images/ad.png" /></a></li> </ul> </div> <div id="Col"> <div id="Column1"> <p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p> <p>Content goes here. Content goes here.</p><p>Content goes here .Content goes here.</p> <p>Content goes here.Content goes here.</p> <p>Content goes here .Content goes here.</p><p>Content goes here .Content goes here.</p> </div> <div id="Column2"> <p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p> <p>Content goes here. Content goes here.</p><p>Content goes here Content goes here.</p> <p>Content goes here.Content goes here.</p> <p>Content goes here. Content goes here.</p><p>Content goes here. Content goes here.</p> </div> <div id="Column3"> <p>Content goes here.Content goes here.</p><p>C ontent goes here.Content goes here.</p> <p>Content goes here. Content goes here.</p><p>Content goes here.Cont ent goes here.</p> <p>Content goes here.Content goes here.</p> <p>Content goes here. Content goes here.</p> <p>Content goes here.Cont ent goes here.</p> <p>Content goes here.Content goes here.</p> <p>Content goes here. Content goes here.</p> <p>Content goes here.Cont ent goes here.</p> <p>Content goes here.Content goes here.</p> <p>Content goes here. Content goes here.</p><p>Content goes here.C ontent goes here.</p></div> </div> </div> <div id="Footer"> <div id="Top_Fot"></div> <div id="Fot"></div> <div id="Bot_Fot"></div> </div> </body> </html> /* CSS Document */ Body{ background-color:#000000; font-family:Georgia, "Times New Roman", Times, serif; color:#FFFFFF; margin:0px; padding:0px; } h1{ margin-left:20%; } a { text-decoration:none; color:#FFFFFF; } a:hover { text-decoration:none; color:#FFFFFF;} #Document { background:url(Images/1.jpg) repeat-y; background-color:#310606; color:#FFFFFF; height:700px; width:1005px; } #Header { height:154px; background-color:#310606; margin:0px; padding:0px; float:left; width:1005px; background:url(Images/header4.png) no-repeat; } #Logo { margin:0px 0 0 5px; height:120px; width:200px;} #Logo img{ border-style:none;} #Top_Right { margin:0px; padding:15px 10px 0 0; height:100px; width:150px; float:right; } #Top_Right ul { list-style:none; } #Top_Right ul li{ margin:5px 0 0 0;} #Col { margin:5px 0 0 120px; float:left; text-align:justify; padding:10px 10px 10px 10px; width:780px;} #Column1{ float:left; width:280px; margin:0 30px 0px 0; } #Column2{ float:left; width:210px; margin-right:30px;} #Column3{ float:left; width:150px;} #Nav{ width:640px; height:60px; float:left; margin:0 40px 0 125px; padding:0px 0 0 60px; } #Nav ul{ margin:0px 0 0 0px; padding:0px 0 0 5px; } #Nav ul li{ display:inline; margin:0px; padding-left:20px; list-style:none; } #Nav ul li img { border-style:none;} #Nav ul li a{ color:#310606; text-decoration:none;} #Nav ul li a:hover{ color:#310606; text-decoration:none;} #Side_Nav { height:400px; position:absolute; top:156px; left:0px; width:120px; padding:0px 0 0 0px; margin:2px 0 0 0px; } #Side_Nav ul { margin:0px; padding:0px;} #Side_Nav ul li{ display:inline;} #Side_Nav ul li img{ border:none; margin:0px; padding:0px;} #Footer { background-color:#000000; margin:0px; padding:0px; width:1005px;} #Fot { width:98%; height:50px; padding:10px 10px 10px 10px; background-color:#310606;} #Top_Fot { height:11px; background:url(Images/footer_start.jpg) repeat-x;} #Bot_Fot { height:24px; background:url(Images/bottom.jpg) bottom no-repeat;}
