Search code examples
htmlcsscss-floatfill-parent

Floated div to fill remainder space

I have a CodePen for this set up here: http://codepen.io/anon/pen/Isqou

div.linksBox {
border:1px solid #a9a9a9;
background:#fff;
-moz-box-shadow:0 5px 12px rgba(0,0,0,0.3);
-webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3);
box-shadow:0 5px 12px rgba(0,0,0,0.3);
margin:0 12px 12px 0;

text-align:center;
overflow:hidden;
}

<div id="topFloats" style="margin-top:5px; overflow:hidden; border:1px solid black; margin-top: 10px;">
    <div style="width:20px; height:340px; float:left; background-color:red;"></div>
    <div id="rightFloatWrapper" class="linksBox">
        <div class="rollover linkIconLayout" id="" style='width: 134px; height: 122px; background-color:green;' href=""></div>
        <div class="rollover linkIconLayout" id="" style='width: 142px; height: 112px; background-color:blue;' href=""</div>
    </div>
</div>

An image in the red (left) floated div sets the height of the black-bordered div. I need an inner (drop-shadowed) div (whose minimum dimensions are set by the size of it's content divs) to expand to fill the remainder of the space in the black-bordered div.

I was able to fill the horizontal space by taking float off the drop-shadowed div, adding an overflow, and setting the margins to accommodate the drop-shadow. How can I fill the remaining vertical space?

Solution

  • Solved. I ended up abandoning floats and using position:absolute;right:0; bottom:0;top:0; on the inner (drop-shadowed) div. The trick was to use a right:5% and set the (previously floated) red div width to the same (width:5%). This accomplished what I was attempting to do with the floated divs and still keeps the flexibility of a liquid layout (with the small downside that if I change the width, I need to make sure to change the right:property as well).

    Hopefully this will help someone else that tries this.

    Cheers!