3 Column Fluid help

Hi

There are loads of sites giving you barebones 3 column layouts, and yours is classic.

I prefer the ones made by Paul O'Brien (www.pmob.co.uk).

They are commented and easy to adapt.

Trevor

Those examples, and all the others I could find, are not the same as what I want.

They all have the header and footer going full width, whereas I don't want them to.

It took me ages to get to the point I am at now and I was hoping to be able to place a higher level container which has the current content on the left and the sidebar on the right (as per my example)

Is it even possible?

Rather than thinking of your layout as a 3-column layout, you need to think of it as a two column layout with another two column layout (with header & footer) inside your wider column.

Hi

If you want the header/footer in by a fixed number of pixels, you might try putting them inside an unstyled div of full width, in another div with left and right margins.

Trevor

Thanks for the suggestions... I think I have cracked it, with the exception of one tiny thing...

I can't get the left and right border to extend all the way to the bottom unless I add a bottom border to the content div. When the bottom border is added the lines goes to the bottom, but... I don't want a bottom border. I can cheat by setting bottom border to be same colour as footer, but this seems daft and I feel I am doing something wrong!

An overall sanity check on what I have done would also be welcome, may help prevent me setting off on a wrong path into the world of css layouts!

Here is the side borders cut short.

Here is the side borders complete but with bottom border. Why do they go all the way when bottom border is specified?

Here is the side borders complete and it looking correct by virtue of bottom border colour matching footer.

If it works for you, I wouldn't worry too much about it, although it looks like your borders should be on #wrap instead of #content-wrap. Also, not sure why you've laid out your columns in divs and then used tables to present the content inside?

If I put the border on #wrap it goes all around the header and footer as well, which is not what I want.

And I only used tables as a quick way of putting simply coloured blocks into the areas I wanted to heighlight. They will go

Cheers

Sorry, it looks like #content-wrap p is causing your unwanted bottom margin.

It looks like it is that, but it's collapsing margins on that p, it will happen with any element in there that has a margin, defaults included.

using a border is one cure, but so is using padding, which might work better here?

try adding padding: 1px 0; to the #content_wrap div see if that works better for you

Thanks, that works fine. Will run with that option, seems less of a obvoius 'workaround' to me