Previous Message
Next Message

First attempt at a full css 2 column fixed width layout failing miserably!

Sent by Joanne on 28 March 2006 01:01

In the quest to remove table layouts from my work, I'm attempting to do a 2
column fixed width layout using pure css. Here's what I'm after.

Header stretching the entire width.
Navigation on left, content on right.
Footer stretching the entire width sitting at the bottom.

Main enclosure is:
#main {
position: relative;
background-color: #ffffff;
width: 760px;
margin: 0 auto;
font-size: 100%;
font-family: Verdana, Helvetica, Arial, sans-serif;
background-image: url(images/contentpaper.gif);}

Header is:
#header {
height: 187px;}

Left column is:
#navigation {
float: left;
width: 180px;

Right column is:
#content {padding: 10px;
float: right;
width: 500px;

And the footer, which I want to stretch the entire width of the #main and
sit below the Left & Right columns is:
#footer {background-image: url(images/footerpaper.jpg);
background-color: #6c207e;
padding: 10px;
margin: 0 auto;
width: 740px;
color: #FFFFFF;}

It looks the way I want it to in IE, but in Opera and Firefox, the
#navigation and #content are sitting on the footer's background and not the
#main's background and the footer is crammed in the middle of them both like
a little piggy! 

HTML code is:
<div id="main">
<div id="header">header image code is in here</div>
<div id="navigation">navigation in here.</div>
<div id="content">Content is going to go in here.</div>
<div id="footer">footer to go in here</div>

I know I must be missing something simple and thought someone who is clever
could point it out to me so I don't get super cranky and go build it in
tables like a naughty girl :)


css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: