3 columns, left and right fixed with, centre fills remaining space

Question

I realise this question has been asked a billion times, but none of the accepted solutions seem to work, so I'm going to try again.

How, using CSS, do I have 3 columns that fill the browser window, the left an right fixed at 200px and the centre one filling the remaining space?

This is very easily done with a table, but I have yet to find a method that works with divs and css.

`none of the accepted solutions seem to work` --> because you need to also to go to the other solutions — Temani Afif, Mar 22 '18 at 15:05

score 1 · Accepted Answer · answered Mar 22 '18 at 15:06

1

You can easily do this with flex-box :

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

.border {
  width: 200px;
  background-color: blue;
}

.main {
  flex: 1;
}

<div class="container">
  <div class="border">Border</div>
  <div class="main">Center</div>
  <div class="border">Border</div>
</div>

answered Mar 22 '18 at 15:06

Arnaud Denoyelle

That's fantastic, and very easy, thank-you. How come most other 'solutions' I've found don't use flex? Is it a relatively new thing? Will there an issue with compatibility if I use it? – Matt Gray Mar 22 '18 at 21:08
1

@MattGray some specific features of flex-box don't work well on IE. Check https://caniuse.com/#search=flex-box for compatibility. This code works even on IE so it works everywhere :p – Arnaud Denoyelle Mar 23 '18 at 08:57

1 Answers1