Side by side div where right div has fixed width

Question

I have two divs, #left and #right inside a #container. The left div is fluid. The right div has a fixed width. How can I get the left div to shrink or expand when resizing the browser while the right div stays in place? Can't seem to make this work. Surprisingly, the opposite (left div fixed, right div fluid) is easy.

Thanks in advance for your help. Here's the code:

#container {
    width: 80%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid grey;
}

#left {
    height: 100px;
    background-color: red;
}

#right {
    width: 100px;
    height: 100px;
    background-color: green;
}

<div id="container">
    <div id="left">        
    </div>
    <div id="right">
    </div>
</div>

CSS:

possible duplicate of [2 column div layout: right column with fixed width, left fluid](http://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid) — Amos M. Carpenter, Feb 26 '15 at 06:02
Is support for IE9 or prior a requirement? If not [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) makes such layouts significantly easier — gapple, Feb 26 '15 at 06:04
@ Amos The solution in that link is not perfect since it requires to change the order of the divs in the html file. @ gapple I'd prefer not to use Flexbox. :) — Pema, Feb 26 '15 at 06:19
@Pema: If you'd bothered to look at the [answer with the _second-most_ votes](http://stackoverflow.com/a/5195914/983430) of the duplicate question, you would've found that it quotes the exact same _alistapart_ article which you claim solved your problem... — Amos M. Carpenter, Feb 28 '15 at 07:55
@Amos: I did bother to look. I just didn't notice it the first time I read it because it was the second best rated answer and also an external link. When I did read that article, I posted the answer here so that it's easier for others to find. So, relax. — Pema, Mar 19 '15 at 05:46
Don't worry, I'm completely relaxed. I'd rather have duplicates marked as duplicates than have the same issue floated around multiple times, though :-) — Amos M. Carpenter, Mar 19 '15 at 06:09

score 3 · Accepted Answer · answered Feb 26 '15 at 06:46

I finally found the solution. Here's the code above with some additions that make it work:

div {
    margin: 0px;
}

#container {
    width: 80%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid grey;   
}

#left {
    width: 100%;
    height: 100px;
    background-color: red;
    float: left; /*Add This*/ 
    margin-right: -200px; /*Add This*/ 
}

/*Add This new Div*/ 
#inside {
    margin-right: 200px; /*Add This*/
}

#right { 
    width: 100px;
    height: 100px;
    background-color: green;
    float: right; /*Add This*/
}

<div id="container">
    <div id="left">
        <div id="inside">    <!--Add This-->  
        </div>
    </div>
    <div id="right">
    </div>
</div>

Here's the website that helped me: http://alistapart.com/article/negativemargins

Brilliant, cross-browser safe solution! Works down to IE8, possibly even below that. Thanks! — Simon Steinberger, Nov 08 '15 at 19:08

score 0 · Answer 2 · answered Feb 26 '15 at 06:18

0

You need to place the right floated div before the left (fluid) div and add float right to #right

here is the working example http://jsfiddle.net/936u0d3b/

#container {
    width: 80%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid grey;
}

#left {
    height: 100px;
    background-color: red;
}

#right {
    width: 100px;
    height: 100px;
    background-color: green;
    float:right;
}

<div id="container">
    <div id="right">
    </div>
    <div id="left">        
    </div>
</div>

answered Feb 26 '15 at 06:18

Sabin

1
1

Is there a way to do it without changing the div order? – Pema Feb 26 '15 at 06:31
If you can use table, table-cell styles. check this http://jsfiddle.net/sabinprakash/936u0d3b/1/ – Sabin Feb 26 '15 at 08:46

score 0 · Answer 3 · answered Nov 08 '15 at 19:12

Although Pema answered his/her question perfectly, here's another simple approach without change of markup that works down to IE9:

CSS:

#container {
    width: 80%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid grey;
}

#left {
    width: calc(100% - 100px); /* added */
    float: left; /* added */
    box-sizing: border-box; /* added */
    height: 100px;
    background-color: red;
}

#right {
    float: right; /* added */
    box-sizing: border-box; /* added */
    width: 100px;
    height: 100px;
    background-color: green;
}

HTML:

<div id="container">
    <div id="left">        
    </div>
    <div id="right">
    </div>
</div>

Side by side div where right div has fixed width

3 Answers3