10 replies [Last post]
Rynert
Offline
Regular
Last seen: 17 years 15 weeks ago
Joined: 2005-10-12
Posts: 16
Points: 0

Hi, decided to make the move from tables to css layouts. Was a bit apprehensive but took the plunge. I have tried really hard but can only get *most* of the way to what I want.

The tables version is here

A trimmed down layout version is here

What I can't get working is a final righthand column which sits outside the main content. If you take a look at both links it will be obvious what I am trying to achieve.

Any pointers would be most welcome.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

Rynert
Offline
Regular
Last seen: 17 years 15 weeks ago
Joined: 2005-10-12
Posts: 16
Points: 0

3 Column Fluid help

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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3 Column Fluid help

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

3 Column Fluid help

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

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

Rynert
Offline
Regular
Last seen: 17 years 15 weeks ago
Joined: 2005-10-12
Posts: 16
Points: 0

3 Column Fluid help

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3 Column Fluid help

Rynert wrote:
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!

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?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Rynert
Offline
Regular
Last seen: 17 years 15 weeks ago
Joined: 2005-10-12
Posts: 16
Points: 0

3 Column Fluid help

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 Smile

Cheers

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3 Column Fluid help

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Suzy
Suzy's picture
Offline
Regular
Last seen: 14 years 41 weeks ago
Joined: 2003-05-30
Posts: 48
Points: 0

3 Column Fluid help

Quote:
#contentwrap p

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

Suzy

Rynert
Offline
Regular
Last seen: 17 years 15 weeks ago
Joined: 2005-10-12
Posts: 16
Points: 0

3 Column Fluid help

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