-1

I'm trying to build the following structure on a page on my website: enter image description here

The black border is the content container. The red border is the left content container and the gray area is the right content container with a gray background.

Now, I want the right content container to expand vertically dependent on the height of the left content container, so they will always have the same height.

How exactly do I go about this? Anyone know of a work-around to make the divs behave like a table would?

Thanks in advance!

All the best,

Bo

bomortensen
  • 3,346
  • 10
  • 53
  • 74
  • related http://stackoverflow.com/questions/1056212/how-do-i-achieve-equal-height-divs-positioned-side-by-side-with-html-css – Adriano Jan 30 '14 at 10:40

2 Answers2

3

You use CSS display:table on the wrapper and display:table-cell on the left and right content. The only catch is lack of support in IE7 and below.

SpliFF
  • 38,186
  • 16
  • 91
  • 120
  • example from my side http://jsfiddle.net/sandeep/myx3Z/ because you give answer first. – sandeep Apr 26 '11 at 12:38
  • Awesome, thanks guys! :-) My only concern is that it is a highly optimized site I am working on at the moment and I would like this to work in at least IE7 aswell. How does this "fail gracefully" if the user is viewing the site in IE7? – bomortensen Apr 26 '11 at 12:49
  • you could fail gracefully by positioning them in IE7 as floats or inline blocks. That would give you the side by side aspect but their heights would be independent, not equal. – SpliFF Apr 28 '11 at 00:30
1

Floating columns with Dan Cederholm's faux column background technique: http://www.alistapart.com/articles/fauxcolumns/

An oldie but a goodie.

Rocketpilot
  • 61
  • 2