Problems with columns...

How do you get columns to line up at the bottom...

[dbuchmann]

Hey, this is no doubt a noobish question but I have a problem...I am trying to set up a 3 column page with css and I can't seem to get my columns to "even out" at the bottom...

I'd post my site so you can see what I'm talking about but it's against the rules so I won't (though it's completely non commercial lol)

This is basically what's happening (I'll try to describe my problem as best I can but I'm pretty new to this so please bear with me...)

I was going to post a big long useless explenation of my setup but I decided against it...basically I have a header, left, middle, and right columns (with floating boxes in the middle column for content). I also have a footer that is sized to the middle column that mimics it's appearance (width, bg image, etc.)

I'm having trouble getting my columns to even out at the bottom specifically the right column as I'm trying to keep my border for the right column all the way to the bottom (even though the amount of content may not warrant this)

I've tried to use the <BR> tag but it spaces differently in different browsers so it's no good for that. Is there some command to make all columns match the length of the longest one?

And if I've overlooked something completely obvious please forgive me :)

-David-

[MamaDawg]

Do you have a height attribute set on your columns?

[dbuchmann]

Well I tried giving all of my columns a

height: 100%;

but it is not working with all of them...is there another command that has to go with them to make them work?

Like a position: absolute; or a position: relative;?

Currently I'm just using the height: 1000px on all three of the columns but I'd rather have it autoadjust to the largest column...or if there is not enough content to extend all of them to the end of the page...

Any way to do this?

-David-

[MamaDawg]

Using absolute vs relative positioning shouldn't affect the height ...

I think the only way you can force the columns to the same size is by giving them an absolute height (like you did), BUT if what you're going for is just the *appearance* that they're the same size (i.e. 3 outlined columns the same height) you can always enclose them in another div. Use full borders around the outside div and just border-left border-right attributes on the center div, and it will look like 3 same-height columns (though they really aren't). This is assuming the center column is the longest ... if not, or if you're using different background colors behind the shorter columns, you may be able to play around with variations on this to get the right effect.

Hope this helps, if not maybe post some excerpts of the code and hopefully some wiser heads than mine can come up with a solution :).

[createErrorMsg]

dbuchmann, what you're describing is a liquid three column layout. There is a bunch of information floating around in the css sites about making them. The best I know of are at bluerobot (add a www and a .com to that and you've got the address). Usually it involves floats or absolute positioning and almost always to get your sidebar columns to continue down to the height of your content requires creating "faux columns" a technique described by Dan Cederholm in an article on a list apart(ditch the spaces, add a www and a .com, plus a /articles/fauxcolumns and you're there).

I think you'll find that the Faux COlumns article gives you exactly what you want.

[jump]

Simply change your "height:100%;" to pixels, eg "height:100px;" or whatever height you want, play with it.
Get rid of the <br /> tags altogether.