Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make left div take up remaining width without swapping elements

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.

like image 406
Keith Avatar asked Aug 16 '13 16:08

Keith


People also ask

How do I make a DIV take up the remaining width?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.


2 Answers

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

like image 175
j08691 Avatar answered Nov 15 '22 01:11

j08691


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; }

like image 44
Scott Brown Avatar answered Nov 15 '22 00:11

Scott Brown