CSS: Trying to use display:table and display:table-cell property

Question

I recently used display:table and display:table-cell properties.

It was like this,

<div id="main" style="display:table">
<div id="left-menu" style="display:table-cell">
Some menu links
</div><!-- End left-menu -->

<div id="content" style="display:table-cell">
The actual content
</div><!-- End content -->

</div><!-- End main -->

I used this because the left-menu background color extends to the bottom, I mean its height is equal the content div. So I dont have to use a background img in my main div which I have to do repeat-y.

But the problem is that the menu links are places in the center of left-menu div and not the top, which is required.

I then had to use position:absolute and top:0 to place the menus at the top of the left-menu div. Which doesnt look to be proper.

Have anybody faced this problem?

Answer 1

You can use faux columns to simulate scaling background images for main content and sidebar divs.