[thelist] Table-less layout

[Beau Hartshorne]

Hi,

I'm working on a table-less layout:

http://clients.cubeinc.ca/mtview/index.php

and

http://clients.cubeinc.ca/mtview/screen.css

Each navigation element is contained in a <div> that's floated to the
left. I did this because when the rest of the site is built, I want the
section that the user is in to be highlighted by changing the
background-color of the floated <div>.

I'd like to use a wrapper <div> to add a background color that extends
to the left and right edge of the page, and provide 16px of left and
right padding for the floated <div>s.

I can't figure out how to do this. I would really anyone's suggestions.

Here's the relevant html:

<div id="navigation">
	<div class="nav-element">Home</div>
	<div class="nav-element">Our Services</div>
	<!-- etc -->
</div>

And css:

div#navigation {
	clear: both;
	margin: 0px 0px 0px 0px;
	padding: 0px 16px 0px 16px;
	color: #960;
	background-color: #341;
	font-weight: bold;
	font-size: 12px;
}

div.nav-element {
	float: left;
	color: #960; /* i want this to be inherited */
	background-color: #341; /* this too */
	margin: 0px 0px 0px 0px;
	padding: 6px 8px 6px 8px;
	border-right: 1px solid #960;
}

I'm also having trouble figuring out whether to use margin or padding.
They seem to be interpreted differently by Mozilla and by IE 6. I can't
get a mental picture of how the browser interprets the margins and
padding. For example, I can't predict what it'll do when something with
padding sits underneath something with a margin. Is this explained
anywhere?

Thanks,

Beau