hybrid kill3r Posted April 3, 2009 Share Posted April 3, 2009 The body of my layout is a long box with smaller boxes inside of it. Well, that's what it's supposed to be, anyways. The problem is that the bottom of the box doesn't stretch all the way down so the small boxes aren't inside of the large box. I've attached a screen shot to show you what I mean. Here's my CSS: body { background: #000000; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; color: #FFF; }#container { margin-left: auto; margin-right: auto; width: 100%; }#logo { background: url(images/bg_logo.gif); height: 162px; padding: 0px; margin: 0px 0px 5px 0px; padding-right: 20px; }#menu { background: url(images/pc-architects_06.gif); width: 100%; height: 42px; text-align: center; }#page { background: url(images/body-bg.gif); margin-left: auto; margin-right: auto; margin-top: 25px; width: 897px; padding-bottom: 15px; margin-bottom: 0px; }#page .top { background: url(images/body-top.gif) no-repeat; width: 897px; height: 22px; margin-bottom: 20px; padding: 15px; }#page .bottom { background: url(images/body-bottom.gif) no-repeat; width: 897px; height: 22px; margin-top: 20px; }.section { background: url(images/pc-architects_21.gif) no-repeat; width: 426px; height: 187px; color: #031c33; float: left; margin: 5px 0px 5px 13px; }#page .section a { color: #000000; font-size: 11px; text-decoration: none; }#page .secion h1 { padding: 10px; font-size: 12px; }#footer { margin-top: 25px; text-align: center; padding: 10px; clear: both; } This is my HTML: <!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>Techranium.com</title><link rel='stylesheet' href='style.css' /></head><body><div id='container'> <div id='logo'><a href='index.html' title='Home'><img src='images/logo.gif' width='721' height='162' border='0' align='right'/></a></div><div id='menu'> <a href='#'><img src='images/pc-architects_08.gif' width='51' height='42' border='0' /></a> <a href='#'><img src='images/pc-architects_09.gif' width='61' height='42' border='0' /></a> <a href='#'><img src='images/pc-architects_10.gif' width='88' height='42' border='0' /></a> <a href='#'><img src='images/pc-architects_11.jpg' width='79' height='42' border='0' /></a> <a href='#'><img src='images/pc-architects_12.gif' width='74' height='42' border='0' /></a> <a href='#'><img src='images/pc-architects_13.gif' width='43' height='42' border='0' /></a> <a href='#'><img src='images/pc-architects_14.gif' width='55' height='42' border='0' /></a> <a href='#'><img src='images/pc-architects_15.gif' width='58' height='42' border='0' /></a> <a href='#'><img src='images/pc-architects_16.jpg' width='79' height='42' border='0' /></a></div> <div id='page'> <div class='top'>Site Name Home</div> <div class='section'> <h1>Site News</h1> <ul> <li><a href='#'>New Site</a></li> <li><a href='#'>Feature Requests</a></li> <li><a href='#'>Staff Hiring</a></li> <li><a href='#'>Nearing Completion</a></li> <li><a href='#'>Welcome!</a></li> </ul> </div> <div class='section'><h1>Popular Tutorials</h1></div> <div class='section'><h1>Popular Threads</h1></div> <div class='section'><h1>New Reviews</h1></div> <div class='bottom'></div> </div> <div id='footer'> © Techranium.com 2009 All rights reserved. </div></div></body></html> Link to comment Share on other sites More sharing options...
jlhaslip Posted April 3, 2009 Share Posted April 3, 2009 Can we have a link to the page, please. It wrks better than posting the code. We don't have the images, for instance. Link to comment Share on other sites More sharing options...
hybrid kill3r Posted April 3, 2009 Author Share Posted April 3, 2009 http://fourthcore.com/techranium/It works fine in IE, but not in FireFox. Link to comment Share on other sites More sharing options...
Guest LimeStoner Posted April 3, 2009 Share Posted April 3, 2009 Have you thought about using <table> in your body instead of <div> tags? You could create a 2x2 table which should be supported by most browsers and will look identical. Your code might look somthing like: <table> <tr> <td> <h1>Site News</h1> <ul> <li><a href='#'>New Site</a></li> <li><a href='#'>Feature Requests</a></li> <li><a href='#'>Staff Hiring</a></li> <li><a href='#'>Nearing Completion</a></li> <li><a href='#'>Welcome!</a></li> </ul> </td> <td> <h1>Popular Tutorials</h1> </td> </tr> <tr> <td> <h1>Popular Threads</h1> </td> <td> <h1>New Reviews</h1> </td> </tr></table> Your .css could then relate to the <tr> and <td> tags instead of .section Link to comment Share on other sites More sharing options...
Ingolme Posted April 3, 2009 Share Posted April 3, 2009 Try adding overflow: auto here: #page { background: url(images/body-bg.gif); margin-left: auto; margin-right: auto; margin-top: 25px; width: 897px; padding-bottom: 15px; margin-bottom: 0px; overflow: auto;}It might sound like a strange solution, but try it and you'll see.Have you thought about using <table> in your body instead of <div> tags? You could create a 2x2 table which should be supported by most browsers and will look identical. Your code might look somthing like:<table> <tr> <td> <h1>Site News</h1> <ul> <li><a href='#'>New Site</a></li> <li><a href='#'>Feature Requests</a></li> <li><a href='#'>Staff Hiring</a></li> <li><a href='#'>Nearing Completion</a></li> <li><a href='#'>Welcome!</a></li> </ul> </td> <td> <h1>Popular Tutorials</h1> </td> </tr> <tr> <td> <h1>Popular Threads</h1> </td> <td> <h1>New Reviews</h1> </td> </tr></table> Your .css could then relate to the <tr> and <td> tags instead of .section Using tables for layout is a bad practise that professional web developers discourage. Link to comment Share on other sites More sharing options...
hybrid kill3r Posted April 4, 2009 Author Share Posted April 4, 2009 All overflow: auto did was create a scroll bar and stretch the background image of #page. The bottom of the page(rounded rectangle), should be below the sections. Link to comment Share on other sites More sharing options...
Ingolme Posted April 4, 2009 Share Posted April 4, 2009 Hmm, apparently, the width of #page doesn't completely contain the boxes.I didn't notice the .bottom element before, Try adding "clear: both" to the .bottom class. Link to comment Share on other sites More sharing options...
pizzaguy Posted April 5, 2009 Share Posted April 5, 2009 add "overflow: auto" to the #page style, add "float: left" to the .bottom style and subtract 30 from the width of .top to make it "width: 867px" Link to comment Share on other sites More sharing options...
hybrid kill3r Posted April 6, 2009 Author Share Posted April 6, 2009 Now .bottom doesn't appear at all. It's just the background of #page so it's a flat bottom.Edit: never mind. Got it fixed. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.