Two divs, one fixed width, the other, the rest

Question

I've got two div containers.

Whilst one needs to be a specific width, I need to adjust it, so that, the other div takes up the rest of the space. Is there any way I can do this?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}

<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

Don't use decade-old hacks for ancient browsers. Scroll down for modern flexbox solution. — Evgeny, Apr 05 '17 at 17:45
Before you follow Evgeny's link consider the browsers your users actually use, rather than the browsers you wished they used. Flexbox is not going to render nicely on your professor's IE 9: https://caniuse.com/#feat=flexbox — duhaime, Aug 14 '18 at 11:50

score 132 · Accepted Answer · edited May 23 '17 at 12:26

132

See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)

HTML:

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

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?

edited May 23 '17 at 12:26

Community

1
1

answered Jun 26 '11 at 22:38

thirtydot

224,678
48
389
349

4

It's not working with me. Left is going at 100% width and right is 250px. Two lines :( – bear Jun 26 '11 at 22:43
19

You need to swap the order of the `div`s, like in my answer and my demo. `right` then `left`. – thirtydot Jun 26 '11 at 22:44
1

Overall this works for me but sometimes when I have text in the left div instead of wrapping to the next line (and there is space) it is just cut off on the right (where the right div starts). How can I make the text wrap in the left div? – Guy Dec 31 '13 at 12:37
1

Not floating DIV fills the full width. Bad idea when content is higher than floating DIV or text too long. – netAction Apr 20 '15 at 16:03

score 64 · Answer 2 · answered Jan 12 '17 at 19:24

64

It's 2017 and the best way to do it is by using flexbox, which is IE10+ compatible.

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

answered Jan 12 '17 at 19:24

Evgeny

6,261
8
35
43

1

your comment on the question saved me from trying to support IE6. thanks! – Mike Davlantes May 27 '17 at 12:19
This is also good, but calc() is much better than flex due to the compatibility with IE9 and Chrome 26. – Don Dilanga Jul 15 '17 at 01:39
This worked well for me. Didn't even need the .right width to be defined. – Howard Jun 25 '18 at 22:57
1

It kills me that in 2017/2018/2019 we still get comments along the lines of BEWARE OF IE 9. – Mike Devenney Jan 17 '19 at 13:41
You can set the width of the right div to auto as well, like "flex: 0 0 auto;". – d.i.joe Sep 07 '20 at 08:45
Thanks, this is the answer which worked for me. – mostafa.S Aug 13 '22 at 07:12

score 48 · Answer 3 · answered Oct 05 '14 at 10:56

48

You can use calc() Function of CSS.

Demo: http://jsfiddle.net/A8zLY/543/

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

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

Hope this will help you!!

answered Oct 05 '14 at 10:56

Shivali Patel

884
8
12

thanks for the advice. I checked the compatibility among browsers, and [it's kind of high for stable usage](https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Browser_compatibility) – Farside Feb 01 '16 at 22:02
1

This should be selected as the best answer, because in this answer the DIV tags ain't swapped like in the best answer. – Don Dilanga Jul 15 '17 at 01:25
helpful even with other flexbox solutions, in my case due to incompatability of flex box in a certain nesting of a react library / component, cheers. – edencorbin Nov 22 '20 at 01:51
Why have I only just discovered `calc`!? – J.Warren Aug 25 '21 at 08:57

score 15 · Answer 4 · answered Jun 26 '11 at 22:45

If you can flip the order in the source code, you can do it like this:

HTML:

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

CSS:

.right {
  width: 250px;
  float: right;
}

An example: http://jsfiddle.net/blineberry/VHcPT/

Add a container and you can do it with your current source code order and absolute positioning:

HTML:

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

CSS:

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

Here, the .left div gets an implicitly set width from the top, left, and right styles that allows it to fill the remaining space in #container.

Example: http://jsfiddle.net/blineberry/VHcPT/3/

FIrst example doesn't seem to actually work. The .left div in the jsFiddle is actually the full width of the screen. If both divs are the same height then great, but in this case just add 5px padding to .left and you'll see. — user3413723, Nov 24 '14 at 19:11

score 6 · Answer 5 · answered Jun 26 '11 at 22:26

If you can wrap them in a container <div> you could use positioning to make the left <div> anchored at left:0;right:250px, see this demo. I'll say now that this will not work in IE6 as only one corner of a <div> can be absolutely positioned on a page (see here for full explanation).

score 3 · Answer 6 · edited Oct 11 '13 at 06:13

1- Have a wrapper div, set the padding and margin as you like
2- Make the left side div the width you need and make it float left
3- Set the right side div margin equal to the left side width

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

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

</div>

Hope this works for you!

score 1 · Answer 7 · answered May 14 '18 at 20:37

If you need a cross browser solution, you can use my approach, clear and easy.

.left{
        position: absolute;
        height: 150px;
        width:150px;
        background: red;
        overflow: hidden;
        float:left;
}
.right{
        position:relative;
        height: 150px;
        width:100%;
        background: red;
        margin-left:150px;
        background: green;
        float:right;
}

score 1 · Answer 8 · answered Jun 26 '11 at 22:19

1

There are quite a few ways to accomplish, negative margins is one of my favorites:

http://www.alistapart.com/articles/negativemargins/

Good luck!

answered Jun 26 '11 at 22:19

baraboom

1,398
9
9

score 1 · Answer 9 · answered Jun 26 '11 at 22:20

1

set your right to the specific width and float it, on your left just set the margin-right to 250px

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}

answered Jun 26 '11 at 22:20

meteorainer

913
8
21

kill the display type in .right and make sure you dont have a clear setting anywhere that would be affecting .left – meteorainer Jun 26 '11 at 22:29
do you have any kind of wrapper div? Is there something online i can go inspect or is this totally local? – meteorainer Jun 26 '11 at 22:37
It's completely, local, however, let me try to put it on jsfiddle. – bear Jun 26 '11 at 22:38
haha, you removed your float: right. Also, don't forget to account for border widths, so if you are going to leave those in subtract the widths from one of the div widths. – meteorainer Jun 26 '11 at 22:44

score 0 · Answer 10 · answered Dec 19 '12 at 08:39

0

Use the simple this can help you

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>

answered Dec 19 '12 at 08:39

Huỳnh Hữu Ân

113
1
4

Two divs, one fixed width, the other, the rest

10 Answers10

Linked

Related