Jump to content

Layout Problem


hybrid kill3r
 Share

Recommended Posts

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

Guest LimeStoner

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

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. Edited by Ingolme
Link to comment
Share on other sites

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

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
 Share

×
×
  • Create New...