CODEWITHSUNDEEP
htmlcss
sadegh
sadegh

Reputation: 1642

2-column CSS one responsive another fixed

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>

Upvotes: 1

Views: 86

Answers (3)

m4n0
m4n0

Reputation: 32255

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>

Upvotes: 1

Kwarrtz
Kwarrtz

Reputation: 2753

Try this:

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

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

Upvotes: 1

Drown
Drown

Reputation: 5982

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

Upvotes: 2

Related Questions