You can: by something I dubbed "dual parenting":
On a similar challenge, I ended up defining an outer relative object, (parenting the floats), and an absolutely defined box of the same dimensions as the relative parent, starting at 0,0 of the shared (relative) parent: an identical copy with the benefit of allowing to place objects within that are able to ignore the outer limits of the float (I needed it to center an object on the page, regardless of the width of the dynamic floats.)
The "dual parenting" squashed both problems:
- the absolute parent couldn't get the height of the floats (but the height of the mutual parent that was able to adapt to the floats).
- the relative parent couldn't position an object centered to the page (it only would find the middle between the floats, and keep the centered content from crossing the borders of the floating objects).
I did a fiddle (contains documentation) demonstrating how this setup squashes and squeezes while still keeping the centered box. The basic idea is outlined in the code below:
html
(on a side note: the order of the div's (left-center-right, center-right-left,...) is irrelevant.)
<header>
<div class="header-left">left</div>
<div class="header-center">
<div class="centerinner">middle</div>
</div>
<div class="header-right">right</div>
</header>
css
header {
position:relative; /* shrinkwrap to contained floats */
/* display: block /* no need to state this here */
width: 100%;
margin:0;
padding:0;
vertical-align: top;
/* background-color: papayawhip; /* Debug */
}
.header-left { /* top left of header. header adapts to height */
float:left;
display:block;
/* width and padding as desired */
}
.header-center { /* absolute reference for container box */
position:absolute;
left: 0;
width: 100%;
height:100%;
/* background-color: gainsboro; /* Debug */
}
.centerinner { /* centered within absolute reference */
margin-left:45%;
margin-right:45%;
padding-left: 1ex;
padding-right: 1ex;
background-color: #D6A9C9;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height:100%;
}
.header-right {
float:right;
text-align: right;
padding-left: 1ex;
color: forestgreen;
/* background-color: #D6F2C3; /* Debug */
}