Favour needed - a CSS layout

Get Started
1

I don’t really know how to make the ‘best’ CSS div layouts.

I wonder if someone could tell me how I would make:
990 wide - centered
990x98 header
790 wide content
200x450 navigation on right
200x200 extra on bottom right
990 wide footer

with divs

2

Here is a basic framework for such a lwayout:


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}

.wrap {width: 990px; margin: 0 auto;}

.head {
	width: 100%; 
	height: 98px; /* ideally don't set a height, but let the contents set the height */
	background: #8a8888;
}

.main {overflow: hidden;}

.content {width: 690px; float: left;}

.side {width: 200px; float: right;}

.navi {
	min-height: 400px; /* preferably remove this when content is in */
	background: #323751;
}

.extra {
	min-height: 200px; /* preferably remove this when content is in */
	background: #e7e7e7;
}

.foot {
	background: black;
	min-height: 20px; /* preferably remove this when content is in */
}

</style>
	
</head>

<body>

<div class="wrap">
	<div class="head">
	</div>
	<div class="main">
		<div class="main">
		</div>
		<div class="side">
			<div class="navi">
			</div>
			<div class="extra">
			</div>
		</div>
	</div>
	<div class="foot">
	</div>
</div>

</body>

</html>
3

Hey,

ralph’s post shows the code to create the template you suggested perfectly, but I would still advise you to look into how the different CSS attributes work - before you know it you need to change a little detail and you end up destroying the template :smiley:

The main attribute in positioning divs horizontally (next to eachother) is the: CSS Float attribute. A good thing to remember (which you can also see in Ralphs excellent code) is that a div should have a width defined (in pixels, percentage etc.) and that it may float a little different depending on the browser of the customer (IE, Mozilla Firefox, Safari etc.).

4

Going on four days since you posted this, so I’ll say it for the original poster: thanks, Ralph, you rock.