ansaurus

Question

Answer 1

+1 A:

http://www.alistapart.com/articles/fauxcolumns/

For anything relatively simple faux columns will do the job, you just repeat an image vertically mimicking the simple solid bg colors of the columns. If it's anything more complex you'll need to do a combination of the sort.

See my reply here for more techniques: http://stackoverflow.com/questions/1184515/2-column-css-div-with-stretchable-height/1184522#1184522

meder 2009-08-26 16:37:27

Thanks, I'll look at the faux technique.

Dorjan 2009-08-26 17:14:59

THe problem here is that it wouldn't work with transparency

Dorjan 2009-08-26 17:19:07

Do you have a link to the design?

meder 2009-08-26 18:30:57

Answer 2

+2 A:

If you need support for IE6 and IE7 I´m afraid you can´t do that in just css without tables or javascript.

For other browsers you can go the display: table-cell and display: table-row way.

Of course faking it using background images works if you don´t really need the columns to be equal height but just appear to be like that.

jeroen 2009-08-26 17:01:42

As I thought. SO for my second question of: is there any reason why I "shouldn't" use tables? Or is that enough a 2nd offical question/thread

Dorjan 2009-08-26 17:04:23

I think jeroen is right... my answer that i posted earlier only works if you have a height set on the container.If you do it with javascript look for a property on the div called scrollHeight or overflowHeight. That will give you the height of the div and it can be used to set the height of the other divs.

Zoidberg 2009-08-26 17:04:47

There are many reasons not to use tables, just look around at SO (rendering time, screenreaders, etc). However there are also valid reasons to use tables but I would definitely not recommend wrapping your whole page in one. I guess you have to decide what´s worse, tables or javascript :-)

jeroen 2009-08-26 17:08:12

hmm, I just wanted my site to be fully displayed without or with Javascript... :(

Dorjan 2009-08-26 17:09:19

@Zoidberg: I don´t know about the cross-browser compatibility of your solution, I normally use jQuery already and then calculating and setting height is pretty trivial.

jeroen 2009-08-26 17:10:36

@Dorjan: In my experience you can solve *almost* all problems using the fauxcolumns method (faking it).

jeroen 2009-08-26 17:12:04

@jeroen: I have used it on a few applications, usually if offsetHeight isn't there, then scrollHeight is, but if JQuery provides this functionality then I would absolutely use that instead, let them worry about the cross browser issues I say.

Zoidberg 2009-08-26 17:12:43

The problem here jeroen is that the right col top needs to be transparent...

Dorjan 2009-08-26 17:24:04

Answer 3

A:

If you just want it to appear that the columns are the same length, you can use this ugly hack:

.rightDiv, .leftDiv
{
    margin-bottom: -1000px;
    padding-bottom: 1000px; /*1000 + real padding*/
}
.wrapper
{
    overflow: hidden;
}

Basically, it causes both columns to extend 1000px further than they should, with the unwanted bits hidden. Won't work with bottom borders though.

Obviously, this doesn't actually make them the same length.

Eric 2009-08-26 17:04:56

Interesting hack thanks but I'd rather not :)

Dorjan 2009-08-26 17:07:24

ansaurus

tags:

views:

answers:

Matching heights of inline elements

related questions