0

I want a layout with two columns, two divs, where the left one has fluid width and the right one has fixed width. So far so good - see jsfiddle below - however, the height of the right column must be in relation to the height of the left column. So that if I have some content in the fluid column and would resize the browser window, thereby increasing or decreasing the height of the left column, the right one should follow and getting the same height.

What I got so far: http://jsfiddle.net/henrikandersson/vnUdc/2/

Edit: Resolved, see comment below

Henrik Janbell
  • 1,784
  • 3
  • 21
  • 30
  • 1
    Do you need to support IE7? If not, you can use `display: table-cell`. [Example.](http://stackoverflow.com/questions/6708816/3-columns-center-column-fixed-sides-fill-parents/6708947#6708947) – thirtydot Apr 13 '12 at 15:13
  • @thirtydot thanks alot, that worked like a charm! Do not need IE7 support. – Henrik Janbell Apr 16 '12 at 15:00

3 Answers3

0

Ah, the ol' two column layout. Unless you want to resort to JavaScript to track the height of one column to adjust the other, you're not going to be able to do it in the way you expect. Using height="100%" usually doesn't work in these situations, either.

What you can do is something like the old Faux Column technique. The div's don't resize, but you have a background image on the parent element that tiles vertically, giving the illusion of equal columns. Old school, yes, but effective.

chipcullen
  • 6,840
  • 1
  • 21
  • 17
  • Unfortunately this will not work since I need the two columns to be of the same height. The reason is that I need to position a button in the middle (vertically) of the right column. – Henrik Janbell Apr 16 '12 at 13:53
  • ahh - yeah, then faux columns won't work. looks like you got a good idea from thirtydot – chipcullen Apr 16 '12 at 15:59
0

You can use JavaScript to get the height of the left div, then set the right div to this height.

To get height of the left div:

var divHeight = document.getElementById('left').offsetHeight;

To set height of right div:

document.getElementById('right').style.height = divHeight+'px';

Your JSFiddle example fixed.

Samwise
  • 306
  • 6
  • 24
0

So, I got an answer to my question from @thirtydot (see comment above):

Do you need to support IE7? If not, you can use display: table-cell

Henrik Janbell
  • 1,784
  • 3
  • 21
  • 30