Brett wrote:
> Hi All,
>
> I have created some nesting div's that I want to be liquid. The
problem
> is the content of the innermost div will not push out the containing
div
> but simply spills over. Is this what clearing the float is for? Can
> someone please look at my code and tell me how I accomplish this.
>
> http://www.belleartae.com/arrow/index.html
>
> Many thanks for any help.
>
> Brett
Hi Brett
Change this
#ibox {
position: absolute;
top: 0px;
left: 0px;
}
to this
#ibox {
position: relative;
top: -8px;
margin-top:-100%;
left: 0px;
}
And for the images, remove the float lefts and rights and clears, and
change the offsets as such.
.ltop {
float: left; /* delete */
position: absolute;
top: -8px;
left: -1px;
height: 11px;
}
.lbot {
float: left; /* delete */
position: absolute;
bottom: -9px; /* change */
left: -1px;
clear: left; /* delete */
height: 11px;
}
.rtop {
float: right; /* delete */
position: absolute;
top: -8px;
right: -1px;
height: 11px;
}
.rbot {
float: right; /* delete */
position: absolute;
bottom: -9px; /* change */
right: -1px;
clear: right; /* delete */
height: 11px;
}
This will cause the pink background to wrap around the li in Firefox
as you desire, looks good, a good technique. Play around with this for
IE. Gets it close.
<!--[if IE]>
<style type="text/css">
html, body {height: 100%;}
body div#container {height: 40%;}
body div#wrapper { min-height: auto;max-height:30%;}
body #ibox {top: 0;}
</style>
<![endif]-->
Kind Regards, Alan
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
