html - Fill rest of div after set pixel div -

html - Fill rest of div after set pixel div -

this question has reply here:

css side side div pixel , percent widths 7 answers

i have varying width div. within 2 others, 1 fixed width, other supposed fill rest of area. can't fill. depending on width of outer-box, either small, or big , drops below inner-box-1. how inner-box-2 fill rest of outer-box?

http://jsfiddle.net/y57yp/

html

<div id ="outer-box"> <div id="inner-box-1"></div> <div id="inner-box-2"></div> </div>

css

#outer-box{ width:50%; background:#fcc; position: relative; overflow: auto; } #inner-box-1{ height:50px; width:50px; background:#ccc; float:left; } #inner-box-2{ height:50px; width:80%; background:#555; float:left; }

this 1 of odd answers easy totally non-intuitive. need trigger block formatting context using overflow property in conjunction float property.

see jsfiddle example.

#inner-box-2{ height:50px; background:#555; overflow:auto; }

all did remove width , float #inner-box-2 div , add together overflow:auto

html css