15 replies [Last post]
theville
Offline
newbie
UK
Last seen: 17 years 51 weeks ago
UK
Joined: 2004-05-27
Posts: 9
Points: 0

I have a 3 column design that I am creating using div tags and CSS. I want to add a footer that spreads across the base of all three columns.

Problem 1: How do I get the columns (all with different contents and therefore of different lengths) to be the same length ?

Problem 2: How do I position the footer ?

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Equalising CSS Column Lengths

I'm not an expert, but one way to do this would be to position your three columns within a 'wrapper' div, which has a repeating background graphic for all three of your columns (so that the columns look the same length even if the content varies. You'll need a clearing line break just before the closing div tag, plus other IE hacks depending upon the exact composition of your CSS. Then you set your footer div with a 'clear: both;' so that it falls below the floating wrapper div. I think that'll do the trick.

Life's a b*tch and then you die!

obsidian
Offline
Enthusiast
South Carolina
Last seen: 15 years 31 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

Equalising CSS Column Lengths

There's a really clear step-by-step of how to get the layout you want here:

http://css.maxdesign.com.au/floatutorial/tutorial0901.htm

You can't win, you can't lose, you can't break even. You can't even get out of the game!

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 18 years 18 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Equalising CSS Column Lengths

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

theville
Offline
newbie
UK
Last seen: 17 years 51 weeks ago
UK
Joined: 2004-05-27
Posts: 9
Points: 0

obsidian

Thanks - great tutorial. It's almost there.

However - I want to colour the left and right columns and I just can't get that to work. If I add background colour it only colours where there is text and not to the bottom....

Any thoughts.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Re: obsidian

theville wrote:
However - I want to colour the left and right columns and I just can't get that to work. If I add background colour it only colours where there is text and not to the bottom. Any thoughts.

Read my post again Wink

Life's a b*tch and then you die!

theville
Offline
newbie
UK
Last seen: 17 years 51 weeks ago
UK
Joined: 2004-05-27
Posts: 9
Points: 0

Equalising CSS Column Lengths

Hmmm. I've replaced the background colour with repeating gig but still can't get it to work (a single graphic won't do as the center column is fluid).

Not certain what you mean by a 'clearing line break'.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Equalising CSS Column Lengths

theville wrote:
Hmmm. I've replaced the background colour with repeating gig but still can't get it to work (a single graphic won't do as the center column is fluid).Not certain what you mean by a 'clearing line break'.

Oh, I see. Well in that case you'll have to do some creative thinking with extra divs, or hope that someone else has a better idea. You could at least colour the first column differently to the next two, and they would all look the same length, so you're almost there.

As for the 'clearing line break', not all of the browsers will display the background graphic of the containing wrapper div unless you force the browser to process something within the div, after the inner divs (if you know what I mean). If you put a line break just before the closing wrapper div tag and style it to clear the inner divs (assuming they are floating) thus: <br style="clear: both;" />, you should then find that your background graphic will butt up to your footer.

Life's a b*tch and then you die!

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Equalising CSS Column Lengths

If plain background colours will suffice, I have just noticed a very clever CSS generator (see link below) which colours columns by using a wrapper with very wide, coloured borders. It'll even write the code for you - take a look.

Life's a b*tch and then you die!

Root
Offline
Enthusiast
Brighton UK
Last seen: 15 years 15 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Equalising CSS Column Lengths

The classical solution to this problem for a single menu is to fit a bg graphic. BUT. It needs to be set up in the outer container not in the menu itself. That way it tiles all the way down. For two of them you need two divs nested one inside the other. One has the graphic right the other to the left. Here is something I prepared earlier. Smile Help yourselves to the CSS by all means. [url] http://www.atthe404.com/trident [/url]

No class, little style and a lotta division.

theville
Offline
newbie
UK
Last seen: 17 years 51 weeks ago
UK
Joined: 2004-05-27
Posts: 9
Points: 0

Try This......

Okay. I'm getting close. Please take a look at the attached file.

In IE, all three columns works okay - they all extend to the length of the longest. You can resize the window and it works.

But Mozilla, Firefox etc seem to ignore the clear: both; command and allow the left and right borders to shrink up the page.

The left and right columns are coloured red so I can see what's happening. The center column is teal with a black and grey thick border on the left and right. In the final version, the red and teal would be removed, leaving three columns: black (left), white (center), grey (right).

.......please help

Root
Offline
Enthusiast
Brighton UK
Last seen: 15 years 15 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Equalising CSS Column Lengths

A url not a zip would be handy. Here is a tip: When positioning it is tempting to add borders to see what is what. It is a very dangerous practice. The presence or absence of an EXTRA border is quite sufficient to bork pixel perfect layouts, and crucially the W3C spec for floated elements is completely different when the parent container has a border. SO: For test purposes you just need to put in a different colored bg.
HTH.

No class, little style and a lotta division.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Equalising CSS Column Lengths

Your clearing div or line break needs to go just before the closing tag of the containing div. How that works with nestled containing divs, I'll leave to root to explain Wink

Life's a b*tch and then you die!

theville
Offline
newbie
UK
Last seen: 17 years 51 weeks ago
UK
Joined: 2004-05-27
Posts: 9
Points: 0

Equalising CSS Column Lengths

The border is integral to the design - essentially it is the left and right column background. This is the only way I've managed to get this to work so far.

theville
Offline
newbie
UK
Last seen: 17 years 51 weeks ago
UK
Joined: 2004-05-27
Posts: 9
Points: 0

Equalising CSS Column Lengths

Thanks, but I've tried that.

Notice how the left and right borders (columns) line up with the bottom of the center content when you change the window width. I want these to line up with the lowest content - which ever columnthat may be.

Root
Offline
Enthusiast
Brighton UK
Last seen: 15 years 15 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

Equalising CSS Column Lengths

Well then you can not use a border based positioning scheme.

No class, little style and a lotta division.