0

I have an issue (about the third time I've ran into it actually) where I have a container which holds a left and right div.

If they are of different lengths (right being longer than left or the other way around) how can I get the other one to stretch [in height] without using Javascript.

I don't want to have to result in table and I thought inherit would do it (but it just inherits auto). There doesn't seem to be an easy answer. Or should I just use tables!? Anything wrong with that?

This problem is blowing my mind for how stupidly simple it should be...

Thanks in advance!

edit: I'll give an example:

<body style="background: #000000 url(????.com);">
    <div id="container" style="margin:0 auto; width:996px; height: auto; background: transparent; overflow:hidden;">
        <div id="left" style="float:left; width:690px">
             <div style="background-color:#FFFFFF;">Content</div>
             <div style="background-color:#FFFFFF;">content</div>
        </div>
        <div id="right" style="float:left; width:306px">
             <div style="background: transparent;">Content<br />Content<br />content<br/>Last line</div>
             <div style="background-color:#FFFFFF;">Content</div>
        </div>
    </div>
</body>

As you would know, the left is much smaller than the right. Height:100% seems to do nothing.

Result: it's impossible without JS support. Cheers all.

Dorjan
  • 2,027
  • 3
  • 16
  • 29
  • did you want to say 'heights' in your title? Do you want me to fix the title for you? – Ilya Kochetov Aug 26 '09 at 16:37
  • I still can't tell if you are asking about heights or widths. – David Kolar Aug 26 '09 at 16:49
  • Heights. I've added an example. – Dorjan Aug 26 '09 at 16:51
  • In your example, how would you (or the user) know that one div is shorter than the other and why would it matter? Your question just seems to be a red herring. Why would you call these 'inline' elements, when they are clearly 'block' elements? – Traingamer Aug 26 '09 at 18:45
  • They are side by side, which is inline isn't it? They have background images, however I want one or two boxes of these container divs to be transparent to see the background. If I have a container for the container set to a background image then it'll prevent me from having a transparent box seeing the correct background. No red herring mate, I just didn't think all the details were needed. – Dorjan Aug 27 '09 at 09:34
  • That is not 'inline'. If both the left and right divs have backgrounds, then any transparency of the holding div is meaningless. If you really mean that there will be more data besides these two divs in the 'container' than add a different container around just these two divs and use the faux columns technique. Give enough information to actually answer the question. – Traingamer Aug 27 '09 at 15:12
  • OK, The background, lets call this has a background. Now the container will have a background in the original method. There would be a left div of say 690px and a right of 300px. Now inside these div's will be the content, so lets say another 5 divs each containing different conent. I would like it so that some of these boxes are transparent showing the background but others aren't. As you can see with the conainer having the background it is impossible so I removed it and placed the background onto the indivdual divs in the left and right containers. This works apart from that... – Dorjan Aug 28 '09 at 10:20
  • They are of different size and thus it looks odd. Using the faux technique requires the background to be set and repeated to give the illusion of equal sized columns, which in this case cannot happen. This is ofc assuming I understand the faux technique. – Dorjan Aug 28 '09 at 10:27
  • I've edited above to show you the problem more accuratly. Sorry you felt you needed more info I thought I had explained it well enough. here you'll see that there will be a left and right area, with the left area ending before the right. I want them ending at the same time without using tables. – Dorjan Aug 28 '09 at 12:08

3 Answers3

2

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
  • 91,079
  • 21
  • 114
  • 132
  • 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 Aug 26 '09 at 17:04
  • 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 Aug 26 '09 at 17:04
  • 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 Aug 26 '09 at 17:08
  • hmm, I just wanted my site to be fully displayed without or with Javascript... :( – Dorjan Aug 26 '09 at 17:09
  • @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 Aug 26 '09 at 17:10
  • @Dorjan: In my experience you can solve *almost* all problems using the fauxcolumns method (faking it). – jeroen Aug 26 '09 at 17:12
  • @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 Aug 26 '09 at 17:12
1

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: 2 column CSS div with stretchable height

Community
  • 1
  • 1
meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
0

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
  • 95,302
  • 53
  • 242
  • 374