|
|
Posted by maik.wiege on 03/11/07 12:39
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
Navigation:
[Reply to this message]
|