Div to take up entire remaining width [duplicate]

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

Just change your right div to this:

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