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.
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.
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
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With