I want to make 4 columns with the <div> element: The width of the 1st column needs to be fixed at 200px. The other 3 columns need to dynamically divide the remaining width between them. <div class="column">Column 1 Fixed 200px</div> <div class="column">Column 2 Fluid</div> <div class="column">Column 3 Fluid</div> <div class="column">Column 4 Fluid</div> How can I achieve this?

Reputation: 199

4 columns - fixed-fluid-fluid-fluid

I want to make 4 columns with the <div> element:

The width of the 1st column needs to be fixed at 200px.
The other 3 columns need to dynamically divide the remaining width between them.

<div class="column">Column 1 Fixed 200px</div>
<div class="column">Column 2 Fluid</div>
<div class="column">Column 3 Fluid</div>
<div class="column">Column 4 Fluid</div>

How can I achieve this?

Upvotes: 1

Answers (3)

misterManSam

Reputation: 24692

Using flexbox

Compatibility: IE11 + and all modern browsers. Safari requires the -webkit- prefix.

Screenshot

If the lack of legacy browser support is not an issue, this layout can be achieved very simply:

The body (or a div wrapper) is given display: flex with a height (you can specify any height you wish the columns to have).
The 3 flexible divs are given flex: 1 and will grow and shrink evenly.
The 1 fixed div is given flex: 0 0 200px it will not grow or shrink and will remain its default 200px wide.

Easy guide to Flexbox over on CSS Tricks.

Complete Examples

With no wrapper

The entire height of the viewport is filled with width: 100vh on <body>.

body {
  display: flex;
  height: 100vh;
  margin: 0;
}
body > div {
  flex: 1;
  background: #F00;
}
body > div:first-child {
  flex: 0 0 200px;
}
body > div:nth-child(2n) {
  background: #F90;
}

<div></div>
<div></div>
<div></div>
<div></div>

With a div wrapper

The wrapper is given a smaller height and an appropriate min / max width.

body {
  margin: 0;
}
.wrapper {
  display: flex;
  height: 50vh;
  margin: 0;
  max-width: 600px;
  min-width: 300px;
  margin: 0 auto;
}
.wrapper > div {
  flex: 1;
  background: #F00;
}
.wrapper > div:first-child {
  flex: 0 0 200px;
}
.wrapper > div:nth-child(2n) {
  background: #F90;
}

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

Upvotes: 1

PavKR

Reputation: 1621

Just building on @bowheart's answer - You could simplify the CSS a little more:

.column {width: calc((100% - 200px) / 3)}
.column:first-child{width: 200px}

This way, you're targeting all of them and then isolating the first one.

Upvotes: 3

bowheart

Reputation: 4676

You can use calc:

.column:nth-child(1) {
    width: 200px;
}

.column:nth-child(n + 2) {
    width: calc((100% - 200px) / 3);
}

Here's a JSFiddle