CODEWITHSUNDEEP
htmlcsscss-float
MacMac
MacMac

Reputation: 35301

Two floated columns - one fixed, one loose width

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.

Upvotes: 44

Views: 40023

Answers (9)

Brett Li
Brett Li

Reputation: 25

I solved a similar problem using flex.

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

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

.right {
    flex: auto;
}

Upvotes: 0

Gerard Banasig
Gerard Banasig

Reputation: 1713

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>

Upvotes: 8

Jacob
Jacob

Reputation: 78840

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;
}

Upvotes: 66

Mars Mellow
Mars Mellow

Reputation: 228

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.

Upvotes: 1

Delgado Bonito
Delgado Bonito

Reputation: 29

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.

Upvotes: 2

Stano
Stano

Reputation: 8939

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/

Upvotes: 9

Andrei Surdu
Andrei Surdu

Reputation: 2341

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/

Upvotes: 1

Sebastian
Sebastian

Reputation: 2339

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>

Upvotes: 1

Zomxilla
Zomxilla

Reputation: 467

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.

Upvotes: 2

Related Questions