Fixed width div on right, fill remaining width div on left

Question

Im searching for a way to have 2 divs as columns where div on right has a fixed width and div on left fill remaining space.

Does anyone happen to know if this can be done?

My attempt (renders block2 underneath block1):

<style>
.block1 {
   width: auto;
   height: 200px;

   background-color: green;
}
.block2 {
   float: right;
   height: 200px;
   width: 200px;

   background-color: red;
}
</style>

<div class="block1">test1</div>
<div class="block2">test2</div>

score 26 · Accepted Answer · answered Nov 11 '11 at 13:45

26

You can do it like this:

HTML:

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

CSS:

.left{
    background:red;

}
.right{
    float:right;
    width:200px;
    background:green
}

Check this live example http://jsfiddle.net/QHTeS/2/

answered Nov 11 '11 at 13:45

sandeep

91,313
23
137
155

6

I never realised the order in the markup made a difference, thanks! – Thomas Nov 11 '11 at 13:52
happy to help :) ; if it's helpful to you then vote & accept thanks – sandeep Nov 11 '11 at 13:54
its not working in my case.. in my case left is fixed and right has to be filled.. – mickeymoon Feb 04 '13 at 16:08
1

@mickeymoon that's you want http://jsfiddle.net/QHTeS/485/ – sandeep Feb 04 '13 at 16:11
5

The issue with this approach is that it requires the user to change structure of the code. This shouldn't be acceptable. It violates the entire idea of separating structure from presentation and business logic. – crush May 29 '13 at 20:35
What if the contents of div on the left needed to be hidden on if they overflow? – Nerian Jan 28 '14 at 09:27
2

I needed to add `overflow:hidden` to `left` in order to get it to work for me. – ulmangt Feb 24 '15 at 20:05
Marked as duplicate question but your answer is the only one managed to provide me with a working solution. – Thierry Mar 05 '18 at 16:02

score 6 · Answer 2 · answered Nov 11 '11 at 13:49

6

Float Both of the elements left:

<style>
.block1 {
   width: auto;
   height: 200px;
   float: left;
   background-color: green;
}
.block2 {
   float: left;
   height: 200px;
   width: 200px;

   background-color: red;
}
</style>

<div class="block1">test1</div>
<div class="block2">test2</div>

You should wrap them in a container as well to prevent messing up the rest of your layout. :)

http://jsfiddle.net/tcFjN/

That was wrong!

Use display: table; on parent and display: table-cell; on children:

<div id="wrapper">
    <div class="block1">test1</div>
    <div class="block2">test2</div>
</div>


#wrapper
{
    display: table;
    width: 100%;
}

.block1 {
       width: auto;
       height: 200px;
       display: table-cell;
       background-color: green;
}
.block2 {
       display: table-cell;
       height: 200px;
       width: 200px;
       background-color: red;
    }

http://jsfiddle.net/tcFjN/1/

answered Nov 11 '11 at 13:49

Kyle

65,599
28
144
152

Kyle, are you sure this code works in chrome? :) For me the green doesn't fill remaining width – Thomas Nov 11 '11 at 13:57
Sorry, I made a slight error, check the EDIT portion of my answer, this definitely makes the green fill the remaining width. – Kyle Nov 11 '11 at 13:58
Aah thanks, the 2nd one definitely works. I like it :) – Thomas Nov 11 '11 at 14:00
An upvote and acceptance is always welcome, unless ou preferred the other method from SAndeep then keep his as marked accepted. – Kyle Nov 11 '11 at 14:01
I like both your answers equally but i read the other 1 first, sorry I wont let me upvote it yet but I will soon as I have enough rep points – Thomas Nov 11 '11 at 14:06
+1 I like this one, very responsive :) – Arkana May 29 '13 at 20:24

score 1 · Answer 3 · answered Oct 14 '13 at 21:55

This is my solution without floats. The only caveat is that I need to use a wrapper. So, if the desired HTML is

parent (has a border, margin, padding,...)
  left (fixed width)
  right (variable width, fill the entire space)

I must rewrite it as

   parent (has a border, margin, padding,...)
      wrapper (has no styling)
        left (fixed width)
        right (variable eidthm, fill the entire space)

My HTML is

  <div style="border:1px solid black; background:red; margin:10px; padding:10px;" >
    <div style=""> 
      <div style="display:table-cell; padding:10px; min-width:100px; max-width:100px;background:green;">Left</div>
      <div style="display:table-cell; padding:10px; width:100%; background:yellow;">Main content</div>
    </div>
  </div>

The main points here are:

No use display:table because then we can not set the border
The use of min-width, max-width
The use of width:100%

If you leave the
away it will work as well, so the empty div is obsolete: http://jsfiddle.net/zp77csw6/ — patrick, Sep 16 '14 at 18:32

score 1 · Answer 4 · edited Sep 16 '14 at 18:34

Check this jsfiddle

Start out with a container <div> (#container) that holds both the left and right <div>s. Float one <div> to the right and give it a specific width (320px in my example). Then give the other <div> an absolute position starting at the absolute left (0px) and ending at the left edge of the <div> on the right (320px).

If you adjust the width of #container, the right <div> will remain fixed at 320px while the left <div> will expand to fill whatever the remaining area is.

Fixed width div on right, fill remaining width div on left

4 Answers4

Linked