0

this is my first question on stackoverflow after doing a lot of research without the appropriate success :-(.

I'm struggling with the task to do a three-column-layout with various amount of content and thereby differing height for each columns content. But the columns should be of same height, so that their background-color reaches down to the bottom. So, I found examples like this

How to make rounded corners on equal height columns

and of course this one

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

But they don't do the trick, as they use overflow:hidden and do a fake height pretty much longer than the page would ever be. So of course, the background-color of each column goes down to the bottom and further. That's fine, but not enough, as I do have to shape the content element's background with rounded corners. It should look like the image on following adress:

http://www.addorange.de/uploads/3columns_rounded_corners.jpg (sorry, I'm not allowed to post images yet :-()

Maybe anybody of you encountered a similar challenge to fix this by pure css.

Thank you,

Christian

Community
  • 1
  • 1

1 Answers1

0

Two solutions:

  • You can use display: table-cell for your three columns
  • Resize them with javascript
ldiqual
  • 15,015
  • 6
  • 52
  • 90