Forte - 12:29 pm on Dec 27, 2011 (gmt 0)

Hi,

I've got a problem driving me nuts, and the reason is simply that I may know many things, but CSS is not one of them...

It is a classical problem: A container div containing two divs, divA and divB, side-by-side, with style float: leftand float: right respectively. Below the container I got another div, divC.

I want both divA and divB to take on the height of the highest of the two, which I got working. The thing is that I do not want anything to move if I start resizing the browser window. Everything should just stay...well...static, I guess. As it is now, divC is stuck to the bottom of my window even if I make the window smaller and divC should disappear. Eventually divC begins overlapping my containerDiv.

some style settings (trying to avoid posting lengthy code:
Body:
height: 100%.

ContainerDiv:

position: relative;
height: 100%;
width: 940px;


divA:

position: relative;
height: 100%;
float: left;
width: 700px;
background-color:#ffffff;


divB:

position: relative;
height: 100%;
float: right;
width: 220px;
background-color: #f0f0f0;


I have tested several different approaches with no luck: Added an empty div inside containerDiv, right after divB, with float:both;

Played with different values of the overflow attribute of containerDiv. I can get close with some of the table-* values, but I want this to work in IE6 or at least IE7.

And many more...

My head is just spinning after hours of playing around with this. I do not set any DOCTYPE explicitly, could that be part of the propblem? If so, which value should I use? What other information could I show you? Of course, the easiest thing would be a link to my page, but that is against forum rules and I agree with the reason for that rule.

Ideas?