Make the left div occupied by the remaining width without replacement elements

Question

I have 2 divs side by side. The right div has a fixed width. The left div should fill the remaining space even when the window is resized. Example:

+---------------------------------+ +---------------+ | | | | | divLeft | | divRight | | <- dynamic width -> | | 120px | | | | | +---------------------------------+ +---------------+ <div> <div id="divLeft">...</div> <div id="divRight">...</div> <div> 

There's a solution that uses float: right on the right element , but requires reordering such elements:

 <div> <div id="divRight" style="float: right; width: 120px;">...</div> <div id="divLeft">...</div> <div> 

Is there a solution that does not require reordering the elements? I am in a situation where reordering them will cause other problems. I would prefer a CSS / HTML solution, but I'm open to using Javascript / JQuery.

The JSFiddle of my attempt to solve it does not work here . I am trying to position the blue div to the right of the green div.

Answer 1

While it doesn't work with <= IE7, display:table-cell seems to do the trick:

 #divLeft { background-color: lightgreen; vertical-align: top; display:table-cell; } #divRight { display:table-cell; width: 120px; background-color: lightblue; vertical-align: top; } 

JsFiddle example

Answer 2

Is that something? http://jsfiddle.net/KMchF/5/

 #divLeft { float: left; overflow: hidden; background-color: lightgreen; vertical-align: top; position: absolute; right: 120px; } #divRight { float: right; width: 120px; background-color: lightblue; vertical-align: top; } 

I added the cleaning of the div , after which you can continue to work with the rest of the page, since otherwise the elements will be under the div { position: absolute; } div { position: absolute; }

Answer 3

You can solve this by positioning.

 #divLeft { background-color: lightgreen; width: 100px; } #divRight { position: absolute; top: 0; left: 100px; right: 0; background-color: lightblue; } body { /* or parent element */ position: relative; } 

Working script

Answer 4

Using display:table and table-cell is suitable for this. I had to add a wrapper .container div, but here is the solution:

http://jsfiddle.net/NmrbP/2/

 .container { display:table; } #divLeft { overflow: hidden; background-color: lightgreen; vertical-align: top; display:table-cell; } #divRight { width: 120px; background-color: lightblue; vertical-align: top; display:table-cell; } 

Answer 5

I worked like this: HTML:

 <div id="divLeft"> [divLeft] Lorem ipsum dolor sit amet, omnes molestie repudiandae eos cu, doming dolorum nonumes has ad. Magna ridens et his, eripuit salutatus sententiae te ius. Ludus accumsan ea usu, ea sed meliore maiorum molestiae, has facer dolore ornatus ut. Eam adhuc platonem mnesarchum ad, mei autem fuisset electram ei. Hinc omnesque eu mei. Ut sit odio melius aperiri, ei mei legere eruditi.<br/> Mel te sale vitae putant, diceret nusquam est an. Ad melius legimus vel. Eum dicam primis persecuti ea, ne alia unum partiendo nec. Ferri tollit docendi et pro, usu vide putant eirmod et. Qui an nostrud dolorum. Sea modo case fugit ea, mea te autem doming dolorum. </div> <div id="divRight"> [divRight] Sit no doctus invenire. Sint consequuntur mei ne, an mea perpetua omittantur conclusionemque. Quaestio platonem no pro. Mei choro oblique mandamus ea, dicat vivendo eloquentiam in eam. Ne pro velit ceteros.<br/> Quem consulatu te pro, albucius menandri et sit. Ne vis nibh nominavi atomorum. Eu pri enim omnes. Iisque vidisse cotidieque ius eu, in fierent dissentiet sed, cu eam sensibus honestatis. </div> 

CSS

 #divLeft { float: left; overflow: hidden; width: 80%; background-color: lightgreen; vertical-align: top; } #divRight { float: right; width: 15%; background-color: lightblue; vertical-align: top; } 

JSFiddle work.

Answer 6

Try the following:

 .div_left{ width:100%; height:100px; position:absolute; top:0px; right:200px; } .div_right{ width:200px; height:100px; float:right; background-color:red; } 

The right attribute of the left div should be the width of the right div, and if these divs are inside another div, it should have overflow: hidden. In this case, the right div will float to the right and will have a width of 200 pixels, and the left div will be placed 200 pixels from the right border and, despite this, will have a width of 100% if it exceeds the width of the container div, the overflow will eliminate this problem.