2-column CSS one responsive another fixed

Question

I need two columns, one responsive, another fixed with 100px width

For example left columns have 100px width and right columns have the remaining width

In this simple code how much to put the width?

<!DOCTYPE html>
<html>
<head>
    <style>
        .main{
            display: table;
            clear: both;
            width: 100%;
        }
        #left{
            float: left;
            width: 100px;
        }
        #right{
            float: right;
            /*width: ;*/
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
</body>
</html>

this looks like it might help just swap the left for right and the 180 pixel to 100 pixels http://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid — john taylor, Jul 23 '15 at 01:49

score 2 · Accepted Answer · answered Jul 23 '15 at 01:50

Since you're already using display: table on the parent, set the children's display to table-cell and give a width to the first one like you did. The second column will automatically take the remaining width.

#left{
    display: table-cell;
    width: 100px;
}

#right{
    display: table-cell;
}

Example : https://jsbin.com/dicuvigaka/edit?html,output

m4n0 · Answer 2 · 2015-07-23T01:54:30.893

You can use calc() to calculate the remaining width. Check the browser compatibility table: Can I use calc().

html,
body {
  margin: 0;
  padding: 0;
}
.main {
  width: 100%;
}
#left {
  float: left;
  width: 100px;
  background: lightblue;
}
#right {
  float: left;
  background-color: tomato;
  width: calc(100% - 100px);
}

<!DOCTYPE html>
<html>

<head>
  <style>
  </style>
</head>

<body>
  <div class="main">
    <div id="left">
      left
    </div>
    <div id="right">
      right
    </div>
  </div>
</body>

</html>

score 1 · Answer 3 · answered Jul 23 '15 at 01:51

1

Try this:

#left {
    position: absolute;
    left: 0;
    width: 100px;
}

#right {
    position: absolute;
    left: 100px;
    width: 100%;
}

answered Jul 23 '15 at 01:51

Kwarrtz

2,693
15
24

2-column CSS one responsive another fixed

3 Answers3