Div to take up entire remaining width

Question

I have a parent div and 2 divs inside it. First child div is 50px wide and 100% height. Second child div is 100% height and I it to take rest of the width ( 100% - 50px ) how do I do that?

Here is the fiddle that I've created: http://jsfiddle.net/muGty/ Basically I want blue div (right ) to occupy rest of the grey container completely.

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

Best way to do it: http://stackoverflow.com/a/22719552/759452 — Adriano, Jun 24 '16 at 08:29

Mr. Alien · Accepted Answer · 2015-03-10T11:48:20.610

20

Do you mean like this?

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

CSS

html, body {
    height: 100%;
}

#left {
    width:200px;
    float:left;
    background: #f00;
    height: 100%;
}
#right {
    margin-left: 200px;
    background: #0f0;
    height: 100%;
}

Update:

You can also use calc() property in CSS3, which will ease up this process like

html, body {
    height: 100%;
}

#left {
    width:200px;
    float:left;
    background: #f00;
    height: 100%;
}

#right {
    float: left;
    background: #0f0;
    height: 100%;
    width: calc(100% - 200px); /* Negate the fixed width element value from 100% */
}

Demo 2

edited Mar 10 '15 at 11:48

answered May 13 '13 at 19:06

Mr. Alien

153,751
34
298
278

7

Just a note ... The element with the "float" property MUST be on top in the markup. Exactly the way Mr. Alien wrote. – Felipe Miosso Sep 25 '13 at 18:28
As fiddle: http://jsfiddle.net/F27sW/ – snappieT Jan 07 '14 at 15:46
After trying several solutions, this one worked the best! Thanks. – Smith Smithy May 28 '14 at 16:02
thanks for your time you saved my day – Ahmed Mahmoud Aug 27 '15 at 15:17

Half_Baked · Answer 2 · 2013-05-13T21:46:37.250

1

Just change your right div to this:

.right{
    float:left;
    height:50px;
    width: calc(100% - 50px);
    background-color: blue;
    display:inline-block;
}

edited May 13 '13 at 21:46

answered May 13 '13 at 21:39

Half_Baked

340
4
18

1

This isn't very compatible with older browsers. See http://caniuse.com/calc – Patrick Feb 12 '14 at 10:27

score 0 · Answer 3 · answered May 13 '13 at 19:04

0

You could add a 50px margin to right and float it.

answered May 13 '13 at 19:04

Daniel A. White

187,200
47
362
445

score 0 · Answer 4 · answered May 13 '13 at 19:07

0

What about editing your right class to make it look like this :

.right{
  float:left;
  height:50px;
  width: 100%;
  margin-right:-50px;
  background-color: blue;
  display:inline-block;
}

answered May 13 '13 at 19:07

RelevantUsername

1,270
8
14

score 0 · Answer 5 · answered May 13 '13 at 21:55

You could also work with an absolute position for the right side column. Consider this example:

.parent{
    width:100%;
    height:50px;
    background:#888;
    position:relative
}
.left{
    float:left;
    height:100%;
    width:50px;
    background:green
}
.right{
    background:red;
    position:absolute;
    bottom:0;
    left:50px;
    right:0;
    top:0
}

Also see this Fiddle. Note that you would need to set position: relative on the parent container for this to fly.

Div to take up entire remaining width

5 Answers5

Linked