html - Expand a div to take the remaining width -


i want two-column div layout, each 1 can have variable width e.g.

div {      float: left;  }  .second {      background: #ccc;  }
<div>tree</div>  <div class="second">view</div>

i want 'view' div expand whole width available after 'tree' div has filled needed space. 'view' div resized content contains if both divs take whole height

not duplicate disclaimer:

expand div max width when float:left set because there left 1 has fixed width.

help div - make div fit remaining width because need 2 columns both aligned left

the solution easy, not @ all obvious. have trigger called "block formatting context" (bfc), interacts floats in specific way.

just take second div, remove float, , give overflow:hidden instead. overflow value other visible makes block it's set on become bfc. bfcs don't allow descendant floats escape them, nor allow sibling/ancestor floats intrude them. net effect here floated div it's thing, second div ordinary block, taking available width except occupied float.

this should work across current browsers, though may have trigger haslayout in ie6 , 7. can't recall.

demos:


Comments

Popular posts from this blog

PHP and MySQL WP -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

go - golang pprof for c library code -