Fixed-width CSS floated 2-column layout equal heights problem

views:

answers:

+1 Q:

Fixed-width CSS floated 2-column layout equal heights problem

Hi,

I have a page design I'm trying to implement with a header (menu bar) and underneath that a div with static width in css. This div contains two divs - #contentArea and #menuArea, each of which have a header, middle and footer (header and footer have background images while middle fits to the content).

I've applied float: left and correct static width to #contentArea and #menuArea which works well, but I'd like to force these two to the same height. I looked to inline/inline-block solutions, but these seem to cause a lot of headaches for IE6/7. Unfortunately this design needs to display reasonably (not necessarily perfectly) back to IE6/FF3.

I've put a simple page demonstrating what I'm doing on my home server at http://home.theevilpenguin.org/c-Help/Index

Can anyone recommend a way to accomplish this or something to look into?

Thanks

+1 A:

You could try setting the attribute height: 100%; on the pageMenuArea div. That should make it the same height as the containing div pageBody.

radman 2010-08-31 04:51:20

Unfortunately as all of the children of #pageBody are floated, #pageBody doesn't have any height for #pageMenuArea to inherit. If I could get an inline-type solution working this would probably work.

TheEvilPenguin 2010-08-31 05:07:32

I've figured it out - I gave pageMenuArea position: absolute and a top, bottom and right value and height: 100%. This seems to have done the trick with some tweaking on the bottom value.

TheEvilPenguin 2010-08-31 05:46:37

ansaurus

tags:

views:

answers:

Fixed-width CSS floated 2-column layout equal heights problem

related questions