7

Can anyone tell me how to make a left div fill the remaining space, without fixing the right div size.

I want the exact opposite of the following example:

.left {float: left; border: 1px solid blue;}
.right {overflow: hidden; border: 1px solid blue;}

The right div should take only the size it needs, the left div should take all the remaining space.

user1565557
  • 75
  • 1
  • 1
  • 3

3 Answers3

16

The right div with a fixed width must float:right; then the left div must stay as it is so it can take its full available width, but since you want the right div to be fixed, you must place it first.

HTML:

<div id="parentDiv">
    <div id="rightFixedDiv"></div>
     <div id="leftDynamicDiv></div>
</div>

CSS:

#rightFixedDiv
{
   float:right; 
   border-style:solid; 
   width:100px; 
   height:200px;
}
#leftDynamicDiv
{
   border-style:solid; 
   background-color:blue; 
   overflow:hidden; 
   height:200px;
}

Check it out, fixed width of 100px: http://jsfiddle.net/dkGbd/ fixed width of 200px: http://jsfiddle.net/eESTZ/

Now if you want the opposite, place the left div first, give it a float:left;

Working example: http://jsfiddle.net/UShek/

Ali Bassam
  • 9,691
  • 23
  • 67
  • 117
  • 1
    Thanks your solution without the fixed width and height did the trick. – user1565557 Jan 26 '13 at 14:52
  • @user1565557 your welcome, I only used with width and the height so that we can see the background-color – Ali Bassam Jan 26 '13 at 14:53
  • 1
    PUTTING IT FIRST. I spent so much time trying to figure this out and that was why! I'm so mad and so happy for your help! – Jacob Raccuia Sep 17 '13 at 14:23
  • 1
    putting it first, that did it! Who would have thought? – Sandro Antonucci Sep 26 '14 at 19:43
  • Thanks for the solution. But what to do in cases when I cannot change the order of divs and I need the left one to be the first? My scenario is with form input fields. I need the left to be stretched and I must keep it the first field for validation focus to work properly. If I change the order, the validation focus for the first error will be on the second element, which is confusing for the user. Here is my fiddle: http://jsfiddle.net/qLypn7h8/ and I want it to work the same even when I move date-input to be the first div. – JustAMartin Feb 16 '15 at 13:53
3

Most of what you have to do is reverse the css and html order of what you did here. The floating element must always be first.

<div class="right">this is the right div</div>
<div class="left">left div</div>

Then the CSS would be

.right {
  float: right;
  background: #fef;
}
.left {
  display: block;
  background: #ffe;
}

Update: Here is the fiddle

Kyle
  • 1,434
  • 1
  • 11
  • 14
  • That almost did the trick, except that the left div now also fills the space that should be taken by the right div. – user1565557 Jan 26 '13 at 14:46
  • Can you check the fiddle I posted? Is the left div filling space below the right div? – Kyle Jan 26 '13 at 14:57
  • The fiddle seems to be correct, but the weird thing is that your sollution is rendered different as soon as I use it on an empty html test page (using a html5 doctype). – user1565557 Jan 26 '13 at 16:27
1

I think the most efficient way is using "display : flex", a new CSS 3 method. You can search this to learn more about this amazing display, I benefit a lot with this. ;)

Pqpq149
  • 11
  • 1
  • 1