Greg K — Fri, 24 Nov 2006 22:57:24 +0000

Hey thanks for the replies, sorry I didn't notice them earlier, my father went into the hospital wed morning, so it has been a hectic week.

I did find a book at books24x7.com that I started reading, "HTML Utopia: Designing without Tables using CSS" it is by sitepoint.com, so far it is pretty good at helping me with the things I was struggling on. Sitepoint says they now have a 2nd edition with more current info. I recommend this so far for anyone in the same boat as me. Unlike most CSS tutorials I have found, this one seems pretty good at giving what really works. I got tired of going to tutorials online and then find out half the stuff I was learning only worked in IE or firefox.

The really funny thing is, the sample site they work on in 1st edition (http://www.footbagfreaks.com/1stedition/) is very close to what I need. I had read one other book from sitepoint before, it pretty good material.

-Greg

Megan — Wed, 22 Nov 2006 16:38:42 +0000

Looks like you're doing well so far. Put a clear: both on the footer div and you'll get that down below the floats. For the columns, a simple solution will make this work like you have in the diagram (with the left sidebar hanging and not extending all the way down). Google "equal height columns" if you want the backgrounds of both to expand all the way down. If the left navbar can hang like you have it in the diagram above, what you need to do is put the background color on the mainarea div instead of on the content area itself.

This is my CSS:

#mainarea {background: #fff; width: 750px;}

#footer {clear: both; width: 750px; background-color: #006; color: #fff; padding: 20px 0; text-align: center;}

Too bad about all those joomla tables

frofi — Wed, 22 Nov 2006 16:27:48 +0000

One more thing.... You don't need to use tables at all. The whole idea behind CSS div containers is that you can place them exactly where you want. Tables are a thing of the past.

frofi — Wed, 22 Nov 2006 16:23:34 +0000

Just put this at the beginning of your style sheet:

body, body * {
position: relative;
margin: 0px;
padding: 0px;
background-repeat: repeat-x;
}

This will ensure you a full control over margins and padding in any browser. Then use absolute positioning for your containers. That way they will not collide with each other. Once you've learned how to use relative positioning, you'll be using absolute less and less.
And don't forget to change the background-repeat value into one you desire.