Box height fun. Containers need to expand to match the other.

[MattyUK]

Hi

I've a problem I am not sure how to tackle.

We have a floated menu element on the left hand side and a content section with a margin to positioning it correctly encompassing the center to the right of the page. Both menu and content are in a containing div called main.

I want the following logic to apply.
1>IF the menu is higher the height of the content should expand to match it. So that the borders align.
AND
2>IF the height of the content is higher the height of the menu should expand to match it. So that the borders align.

Test page showing problem (1>)here:
http://dev.famousfriends.co.uk/test.html

Test page showing problem (2>)here:
http://dev.famousfriends.co.uk/test2.html

All CSS is linked to from the pages above.

I don't want to use conditional statements, as in no javascript, vb script or such like. Looking for a CSS only solution.

I know that table cells in a row would behave this way but I am avoiding using tables for the layout, for obvious reasons, alongside the fact I am curious to see how/if CSS can be used to tackle this.

MattyUK

[AaronW]

Basically you want faux columns: http://www.alistapart.com/articles/fauxcolumns/

Let us know if you need any help after reading that.

[MattyUK]

Thanks Aaron.

Yup I reckon I do need help even after that. Thanks none the less. Its a good article.

I used to use the tiled background trick to provide the columns background colour before. Allthough Id never seen that article before. See http://www.famousfriends.co.uk where it is still up.

However it isn't the menus background colour that matches simply the CSS borders that must align with each other. That is the bottom of both sections must align with each other no matter which is the highest.

I guess I could use a transparent gif with the 2 pix borders on each side then tile it, but it wouldn't take care of the following:
1>Top/bottom borders. I would still need to expand one of the containers to add the bottom border where the gif ended.
2>If I change the colours via CSS. I'd need to change the images as well.
3>If I change the sections dimensions via CSS. I'd need to change the images as well.

So whilst Faux columns are good to know, I am not sure they match what I need to do.

Any other ideas?

MattyUK

[MattyUK]

Well it still has me stumped. Any ideas anyone?

[harbingerOTV]

I didn't try this directly but it's worth a shot. And looking at your code, it might be easier for you to try than me

float the #content right.
make a div in both the #menu and #content. And then style it something like:

(#menu div)

.clearcontent {
clear: right;
height: .1px;
display: block;
}

(#content div)

.clearmenu {
clear: left;
height: .1px;
display: block;
}

Then position it where it will sit on top of the bottom border of the parent div it's in or dead bottom (with a height of .1px it probally will be barely noticeable).

Since I didn't try it I'm not sure if the div in the #menu will "see" the floated #content and visa versa but it's worth a shot.

[MattyUK]

Good Call, best idea I've seen yet.

No joy however.

http://dev.famousfriends.co.uk/test3.html
http://dev.famousfriends.co.uk/test4.html

I've used the test override css file to action your code. The test file reads:

div#content {
float: right;
}
div.clearit {
height: .1px;
display: block;
background-color: #FF0000;
}
div#menu div.clearit {
clear: left;
}
div#content div.clearit {
clear: right;
}

Was definately worth a shot. Any other ideas? Tables would handle this with little problems. But I would like to avoid them for layout dependance.

[harbingerOTV]

It was worth a shot. I have to get ready to do some real work, I'lltry andmess around with it more later.

One thing though:

div#menu div.clearit {
clear: left;
}
div#content div.clearit {
clear: right;
}

you did try it the other way around didn't you? eg... the #div#menu div.clearit needs to clear right not left. the menu is on the left and the #div#menu div.clearit is in the menu so it's already clearing left. It needs to clear right so it clears the #content. And visa versa.

still might not work, but it won't written like that.

[MattyUK]

Originally Posted by harbingerOTV

you did try it the other way around didn't you? eg... the #div#menu div.clearit needs to clear right not left.

Sometimes I can be a plain idiot. I had it the wrong way around. Sorry to say that it still doesn't give an effect. No joy.

Thanks for your efforts so far. Here's hoping we can work it out.

Yours hopefully....
MattyUK

[AaronW]

It's impossible without the background image thing. As I understand it, you want both columns to be the same height at all times. If the menu is short and the content is tall, you want the purple menu to extend all the way down to the base of the content, and the other way round if the menu is taller than the content, right?

You can't create relationships like that without tables, javascript, or the background-image approach.

[MattyUK]

Hi AaronW

It's impossible without the background image thing. As I understand it, you want both columns to be the same height at all times. If the menu is short and the content is tall, you want the purple menu to extend all the way down to the base of the content, and the other way round if the menu is taller than the content, right?

Close enough, I don't care about the purple background just the CSS border. As in the height of the container itself needs to expand equal that of the other (be that menu or content).

Ok I hear what you are saying. "not possible via CSS alone."

I'm not so sure however. My recent thinking is as follows:
Container div with height set but overflowed when necessary. two divs contained have their height set to 100%.

I will author a test page of this theory but if it works then how to put it into the current layout will be the next challenge.

I'll have a quick attempt but you may very well be proved right.

Cheers.
MattyUK