Two floated columns - one fixed, one loose width

Question

I've looked around SO, but I cannot find one that matches my occurrence, I basically have two columns one fixed width (185px) and the other column has no fixed width, however I need the last column to fill the last space, e.g.

...........................................
.---------  ------------------------------.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  ------------------------------.
.+       +                                .
.+       +                                .
.+       +                                .
.---------                                .
...........................................

The first column should always be 100% to the bottom when the second column fills the remaining width, they both are floated left, if I resize the browser window, the second column shows under the first column. I need the second column to fill the remaining width and be flexible when resizing the browser window.

score 66 · Answer 1 · edited Jun 16 '17 at 11:20

66

There's actually an easier way to do it than using floats:

.container {
    position: relative;
}

.left {
    width: 185px;
    position: absolute;
    top: 0;
    left: 0;
}

.right {
    margin-left: 185px;
}

edited Jun 16 '17 at 11:20

Frederik Struck-Schøning

12,981
8
59
68

answered Jan 13 '11 at 03:26

Jacob

77,566
24
149
228

8

This works great... but after the container i have footer... what happening is... the footer is not goes after the container... instead its became middle of the container. – rkaartikeyan Oct 26 '13 at 23:38
@Jacob is that possible to use % instead of specific pixel? – Duc Tran Dec 13 '13 at 07:00
The right width isn't going to stretch 100% if the content isn't big enough though? – NaturalBornCamper Oct 27 '17 at 22:30

score 9 · Answer 2 · answered Jul 01 '13 at 23:34

By using negative margins from this tutorial the CSS can look as follows

html, body, .container {
    height:100%;
    padding:0;
    margin:0;
}
.container {
    min-width: 300px;
}
.left {
    float:left;
    width: 185px;
    margin-right: -185px;
    height:100%;
}
.right {
    margin-left:185px;
}

http://jsfiddle.net/Y5FAT/1/

http://jsfiddle.net/Y5FAT/

Gerard Banasig · Answer 3 · 2017-07-19T03:38:59.363

Edited the solution, this time using flexbox, made the left column fixed using flex: 185px 0 0; then made the right column auto grow using flex-grow:1

*{
  box-sizing: border-box;
}

body{
  padding:0;
  margin:0;
}

#container{
  display:flex;
}

#left{
  height: 100vh;
  flex: 185px 0 0;
  background-color:tomato;
}

#right{
  flex-grow: 1;
}

#right > div{
  background:pink;
}

  <body>
    <div id="container">
      <div id="left"> Left </div>
      <div id="right">
        <div>
        Right <br/>
        dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf  dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf 
        </div>
      </div>
    </div>
  </body>

The right column will not automatically fill the available space like this, but instead use the minimal required room to display its contents. — Timothy Groote, Mar 26 '13 at 10:54
@TimothyGroote here is my updated solution using ```flexbox```,the right column should now fill/grow to the available space https://jsfiddle.net/ouymLfoz/ thanks. — Gerard Banasig, Jul 18 '17 at 07:47
Ok, that seems to work. but why didn't you just update the answer? — Timothy Groote, Jul 18 '17 at 14:02

score 2 · Answer 4 · answered Feb 06 '14 at 18:13

The "position: absolute;" answer is pretty good, but it has cross-browser implications, especially if you're developing for IE. The best way to accomplish this is the following:

<html>
<head>
<style>
    div.right {
        float: right;
        width: 200px;
    }
    div.left {
        margin-right: 200px;
    }
    div.clear {
        clear: both;
    }
</style>
</head>
<body>
    <div class="right"><!--your code here--></div>
    <div class="left"><!--your code here--></div>
    <div class="clear"></div>
</body>
</html>

Please note that the div you require on the right side is called first in the HTML. Also, note the clearing of the float after the columns, which will come in handy if you have content below, or if there is a parent container.

Note; it's bad practice having styles in the head section, regardless of it being a demo. It's also bad practice selecting elements in CSS by element name and class name (e.g. div.right) - just class name will suffice. — TheCarver, Mar 08 '18 at 11:44

score 2 · Accepted Answer · answered Jan 13 '11 at 03:23

Have a look at this. There aren't any demos, but I've used tutorials from this guy before so I assume it works fine. I gather from the article that the main content is liquid. The side content may also be liquid, but I think you can just give it a fixed width and leave it at that. The trick here is to place the main content first.

score 1 · Answer 6 · answered May 08 '13 at 12:37

If you don't want to use neither floats nor absolute positioning, the easiest I could come up with was

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        white-space: nowrap;
      }
      div.left {
        display: inline-block;
        width: 200px;
        white-space: normal;
        background-color: red;
        vertical-align: top;
      }
      div.right {
        display: inline-block;
        white-space: normal;
        background-color: green;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
  </body>
</html>

score 1 · Answer 7 · answered Jun 13 '13 at 20:05

1

Well, approved answer ia a good one, but for those that are searching for more here is a link. Hope you find this useful. ;)

http://www.dynamicdrive.com/style/layouts/category/C13/

answered Jun 13 '13 at 20:05

Andrei Surdu

2,281
3
23
32

score 1 · Answer 8 · edited May 23 '17 at 12:03

1

I had tried almost all of the above solution until i stumbled upon this, and it works wonderfully for me. How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

Not sure why, it seems you only need to float the column that has fixed width. The rest just fall in to place.

edited May 23 '17 at 12:03

Community

1
1

answered Jun 26 '14 at 10:26

Mars Mellow

228
2
14

Brett Li · Answer 9 · 2022-06-15T13:01:18.143

0

I solved a similar problem using flex.

.container {
    display: flex;
    flex-direction: row;
}

.left {
    width: 185px;
    /* height: 200px; */
    flex: none;
}

.right {
    flex: auto;
}

edited Jun 15 '22 at 13:01

answered Jun 14 '22 at 07:48

Brett Li

25
6

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 14 '22 at 08:03

Two floated columns - one fixed, one loose width

9 Answers9

Linked