CODEWITHSUNDEEP
csscss-float
user1565557
user1565557

Reputation: 75

Fill remaining space with left div

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.

Upvotes: 7

Views: 11254

Answers (3)

Pqpq149
Pqpq149

Reputation: 11

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. ;)

Upvotes: 1

Kyle
Kyle

Reputation: 1443

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

Upvotes: 3

Ali Bassam
Ali Bassam

Reputation: 9959

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/

Upvotes: 16

Related Questions