html - 2 divs aligned side by side, how to make right div fill width 100%? -

i'm wondering best way go doing is...

i have 3 divs:

• a div#container width=100%; holds 2 inner divs

• a div#inner_left width changing dynamically, no wider 200px (will hold product image)

• an div#inner_right width should fill rest of space in container (will contain text describe product shown)

  #container {    width:100% }  #inner_left {     display:inline-block:     max-width:200px; }  #inner_right {     display:inline-block;     width:100%;  } 

the problem div#inner_right creates line break , fills entire width. how can make them align next each other, right div accounting width taken left div (which changes dynamically?). i've gotten work other ways, i'm looking clean solution...

any css noob appreciated!

have @ "liquid layouts" can describe you're talking about.

you're looking this one.

in example, try setting display inline. however, won't technically able use block level elements in it, have @ links posted above. :)

the problem setting width 100% if you're using floats is considered 100% of container, won't work either since 100% includes left div's width.

edit: here example of other answer, i've edited include html/css example site above simplicity's sake.

i'll include below:

html

<div id="contentwrapper">     <div id="contentcolumn">         <div class="innertube"><b>content column: <em>fluid</em></b></div>     </div> </div> <div id="leftcolumn">     <div class="innertube"><b>left column: <em>200px</em></b></div> </div> 

css

#contentwrapper{ float: left; width: 100%; }  #contentcolumn{ margin-left: 200px; /*set left margin leftcolumnwidth*/ }  #leftcolumn{ float: left; width: 200px; /*width of left column*/ margin-left: -100%; background: #c8fc98; }