Question

I know this has been asked a million times before but i still can’t seem to find the answer (most questions seem to be the opposite of what i want not the same).

I have two divs say #left and #right. #right has fixed dimensions 150px x 50px. I want #left to expand and fill the remaining space and #right to be on the very right of the screen. I have tried floating them in different ways and also setting display: inline-block; but i still cant seem to nail it. All the articles i’ve read are about the left div being fixed and the right one growing. I tried reversing what i read but it always leads to the #left div floating around #right. What i mean by this is, my #left div will with shrink to its smallest (inline-block) or it will display the first 50px up to the #right then the rest of #left will tuck under #right rather than staying flush.

I hope this makes sense. It’s kind of hard to explain.

Answer 1

Write like this:

.right{
 width:150px;
 height:150px;
 float:right;
 background:red;
}
.left{
 height:150px;
 background:green;
 overflow:hidden;
}

HTML

<div class="right">fixed</div>
<div class="left">auto</div>

Check this http://jsfiddle.net/TW4dn/