Make left div take up remaining width without swapping 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 as 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 it requires reordering the elements like this:

<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'm in a situation where reordering them will cause other problems. I'd prefer a CSS/HTML solution to this but I am open to using Javascript/JQuery.

Here's a non-working JSFiddle of my attempt to solve it. I'm trying to position the blue div to the right of the green div.

You can use `calc()` - e.g. `width: calc(100% - 120px);` but browser support isn't the best, especially in mobile browsers. — Adrift, Aug 16 '13 at 16:13
Have a look at this article: http://alistapart.com/article/negativemargins — matpol, Aug 16 '13 at 16:22

score 8 · Accepted Answer · answered Aug 16 '13 at 16:20

8

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

answered Aug 16 '13 at 16:20

j08691

204,283
31
260
272

Is there any downside to not having a container div with display:table? I'd prefer not to include one, like in your example, if I can get away with it. – Keith Aug 16 '13 at 16:39
Nope, in this case it's not at all necessary. – j08691 Aug 16 '13 at 16:49
1

Thanks! I prefer this solution for its simplicity. The other solutions propose using absolute or relative positioning which works well for my JSFiddle example, but in my real case it required hacks to the margins to make things line up correctly. – Keith Aug 16 '13 at 18:00
Is `vertical-align:top;` necessary? – www139 Dec 25 '15 at 19:23

score 3 · Answer 2 · answered Aug 16 '13 at 16:19

Is this the kind of thing? 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've added a clearing div after so you can carry on with the rest of the page as otherwise elements would be under the div { position: absolute; }

Mr_Green · Answer 3 · 2013-08-16T16:31:11.763

1

You can solve this using 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 fiddle

edited Aug 16 '13 at 16:31

answered Aug 16 '13 at 16:19

Mr_Green

40,727
45
159
271

1

Can I get that in cornflower blue? – j08691 Aug 16 '13 at 16:23

score 0 · Answer 4 · answered Aug 16 '13 at 16:18

Using display:table and table-cell work well for this. I did have to add a wrapping .container div, but here's a 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;
}

score 0 · Answer 5 · answered Aug 16 '13 at 16:20

I got it working 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;
}

Working JSFiddle.

score 0 · Answer 6 · answered Aug 16 '13 at 17:40

Try this:

.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 must be the width of the right div and if those divs are inside of another div, that one needs to has overflow:hidden. In this case the right div will float at right and will has a 200px width and the left div will be placed 200px from the right border and, despite of it will has a 100% width, if it exceeds the width of the container div, the overflow attributed will fixe that problem.

Make left div take up remaining width without swapping elements

6 Answers6