DIV with rounded Corners (CSS) AND full height

[maik.wiege]

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.

Here is the code I use:


the HTML-part:

<div id="wrapper">
<div id="content">
<div class="t"><div class="b"><div class="l"><div class="r"><div
class="bl"><div class="br"><div class="tl"><div class="tr">
RIGHT COLUMN (id=content) <br/><br/><br/><br/>
</div></div></div></div></div></div></div></div>
</div>
<div id="menu">
<div class="t"><div class="b"><div class="l"><div class="r"><div
class="bl"><div class="br"><div class="tl"><div class="tr">
LEFT COLUMN (id=menu)
</div></div></div></div></div></div></div></div>
</div>
</div>


And the css-Styles (I've included many browser-hacks):

#content
{
background-color: green;
float: left;
width: 48em;
margin-left: 12em;
overflow: hidden; }
* html #content
{
display: inline;
}
#menu
{
background-color: red;
float: left;
width: 12em;
margin-left: -60em;
}
/* Start Mac IE5 filter \*/
#content, #menu
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#content, #menu
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#content:before, #menu:before
{
content: '.';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/* End Mac IE5 filter */
#wrapper
{
width: 60em;
overflow: hidden; /* This hides the excess padding in non-IE browsers
*/
}
/* we need this for IE 5.01 - otherwise the wrapper does not expand to
the
necessary height (unless fixed, this problem becomes even more acute
weirdness as the method is enhanced */
#wrapper
{
/* Normally a Holly-style hack height: 1% would suffice but that
causes
IE 5.01 to completely collapse the wrapper - instead we float it */
float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise
5.5 sometimes
(I saw it happen many moons ago) makes the width of wrapper too small
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here
just in case that many moons ago problem rears its head again */
float/**/: none;
}
/* easy clearing */
#wrapper:after
{
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper
{
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
/*\*/
#wrapper
{
display: block;
}
..t {background: url(images/t.gif) 0 0 repeat-x; width: 100%;}
..b {background: url(images/b.gif) 0 100% repeat-x; width: 100%;}
..l {background: url(images/l.gif) 0 0 repeat-y; }
..r {background: url(images/r.gif) 100% 0 repeat-y; }
..bl {background: url(images/bl.gif) 0 100% no-repeat;}
..br {background: url(images/br.gif) 100% 100% no-repeat;}
..tl {background: url(images/tl.gif) 0 0 no-repeat;}
..tr {background: url(images/tr.gif) 100% 0 no-repeat; padding: 24px; }

The gif-images of the corners have 24x24 pixels and the sides have
24x1 pixels.

You can test that code by simply copying it and you will see, that the
DIVs "content" and "menu" have the same heigt indicated by their back
color, but the border-DIVs surrounds only the content, resulting in
the left cols border to be shorter thand the right ones, but I want
both to have the same total height.

Anyone an idea how to accomplish that? I tried many things but none
with a satisfying result. :-(

Thanks for any help
greetings
Maik

 

[Ben C]

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.

 

[Nik Coughlin]

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.

I address something similar here:

http://www.nrkn.com/3ColRoundAlpha/

It's a 3 column layout but it is still applicable to your problem