-2

I have two divs. I want the one on the left to be 200px. I want the one on the right to fill up whatever the screen width is - 200px. In other words the div on the right should be 100% of the available space after the div on the left is drawn. Is there a pure css way of doing this?

rough example

<div class='l'></div><div class='r'></div>
.l {
    display:inline-block;
    background:green;
    width:100px;
    height:20px;
}

.r {
    background:red;
    height:20px;
}
user1873073
  • 3,580
  • 5
  • 46
  • 81

1 Answers1

1

Working jsFiddle Demo

Consider the following markup:

<div id="fixed">Fixed Width</div>
<div id="flexible">Flexible Width</div>

And in your CSS:

#fixed {
    background: red;
    float: left;
    width: 200px;
}

#flexible {
    margin-left: 200px;
    background: green;
}