html - Floated div to fill remainder space -
i have codepen set 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 red (left) floated div sets height of black-bordered div. need inner (drop-shadowed) div (whose minimum dimensions set size of it's content divs) expand fill remainder of space in black-bordered div.
i able fill horizontal space taking float off drop-shadowed div, adding overflow, , setting margins accommodate drop-shadow. how can fill remaining vertical space?
solved. ended up abandoning floats , using position:absolute;right:0; bottom:0;top:0;
on inner (drop-shadowed) div. trick use right:5%
, set (previously floated) red div width same (width:5%
). accomplished attempting floated divs , still keeps flexibility of liquid layout (with small downside if change width, need make sure change right:
property well).
hopefully else tries this.
cheers!
Comments
Post a Comment