Hi guys I'm working on this website and for once i want to try to avoid tables and stick to DIVs but i'm stuck. I have my background color split in the midle with 2 shades and i cant get my logo centered i tried putting it into a div but dont know where to go from there now i have it in my header as an image it shows under my 2 content divs. Here is a link to what i'm at right now http://sebastienb.com/clients/fabcominc/
And here is a link to where i'm heading http://sebastienb.com/clients/fabcominc/tmpl.png

It shows under your two content divs because the image is 113px tall but the header div is set to 22px in height. A div is not like a table cell if you set it to a height that is less that the content within it - it won't stretch.

AHH! Not Tables! Your layout is actually much easier to create with tableless CSS. I'm not gonna give you the exact code (don't have the time and you'll probably learn better if you write it yourself and make mistakes along the way), but here's the basic formula you want to follow:

First, let's break your layout into sections. The way I'm seeing it, you've got the wrapper (all the content with the gray border), the red "fabcorpinc.com" bar (which i'll call the "header"), the logo, the media section, the media nav, the public relations section, and the public relations nav.

The wrapper will contain the other content & it's CSS will contain the border and a background image to create the 2 faux columns (http://www.alistapart.com/articles/fauxcolumns/). The header will be first in the source inside of the wrapper. Then you have the the media section, followed by the public relations section (css for each would be 50% width and floated left).

Then for the 2 navs and the logo image, there's a few ways to put them where they need to go. I'd say just add position: relative to the wrapper, and then apply position:absolute to the navs and logo (so they're absolutely positioned within the wrapper) and set the appropriate top and left values. Since they're absolutely positioned, they can appear in the source code wherever you want (as long as they are direct children of the wrapper).

since those 2 main columns are both floated, you'll also need to clear the float so the border wraps around the content properly. You can do that by either adding an extra div with a clear:both style, or use PIE's clearfix method (http://www.positioniseverything.net/easyclearing.html).

however, if those 2 columns (media section & public relations section) have a set height, then you don't need to use the faux columns and clearfix techniques (setting a height on those 2 columns will take care of the the issues those 2 techniques fix).

happy coding! let us know when you've got it working.

Thanks guys, the separation was a big problem but i managed to ge it by making a 3000 wide bkg and centering it in the body. Now i have to tackle the nav. Also my divs are way off in IE so i'll read your replies and see what i did wrong .
here is an update of what i did before your replys back to work i guess.

http://sebastienb.com/clients/fabcominc/