Posted by Ben C on 03/11/07 21:16

On 2007-03-11, maik.wiege@googlemail.com <maik.wiege@googlemail.com> wrote:
> Hi erveryone,
>
> I'm having two DIV-Columns beside each other using float. It works
> well, that this both columns always have the same height, no matter
> witch one has more text in it, the other one scales to that size too.
> I now addded rounded corners to both DIVs and I can't figure out, how
> to let that DIVs size to the full height of their "parent", so that
> the rounded corners are really arround the full parent DIV and not
> just the content.
>
> I hope I could explain it correctly, sounds a little bit confusing.

Not half as confusing as your CSS! I've never seen anything like it.

By giving #menu a negative left margin, you get it to appear to the left
of #content, even though it appears after it in the source, and both are
floated left.

Then it looks like you're using an invisible block box inserted with
:before to clear the floats and determine the height of #wrapper, while
giving each float enormous bottom padding and enormous negative bottom
margin so that their content areas appear to fill to the height of
#wrapper.

10/10 for ingenuity, but CSS is not supposed to be this difficult.

All this is before we even get to your rounded corners. Your basic
problem there seems to be that they're above #menu's bottom padding,
since they're background images on nested divs inside it.

How to solve it? I can't think of a way with this basic design. You
would need to extend #menu's content area, but the amount to extend it
by depends on the height of the contents of the other float, which is
another block formatting context, so you can't use clear.

I would suggest rethink how you're doing the two columns. You want both
columns the same height, and high enough for the one with the highest
contents. The obvious and best solution is a table. Then you can put
your curved borders around the table cells in the same way you've been
doing by nesting divs with background images, or just create more cells
for them.

[Back to original message]