CODEWITHSUNDEEP
htmlcss
GGu
GGu

Reputation: 81

Fluid three column layout with fixed width center column

I want to obtain this layout:

<------------ Browser Width 100% ------------>
[left][----- center: fixed width -----][right]

The example below breaks when the viewport width is not wide enough, and getting the correct percentage width is hard because of the fixed width center column.

div {
  display: inline-block;
  background: #F90;
  height: 100px;
  width: 20%;
}
.center {
  width: 500px;
  background: #FF0;
}
<div class="left">left (fill available space)</div>
<div class="center">fixed width</div>
<div class="right">right (fill available space)</div>

Upvotes: 0

Views: 3239

Answers (1)

misterManSam
misterManSam

Reputation: 24692

Three ways to achieve a fluid / fixed column layout

Method #1 - with display: table

This is one of the easiest methods and has good browser support.

Compatibility: IE8 + and all modern browsers

  • body gets display: table - this could also be applied to a div wrapper instead.

  • table-layout: fixed ensures the middle column remains fixed width

  • the direct div children of body get display: table-cell

  • the body gets a min-width to ensure the left and right columns do not get too small

  • the middle column is fixed at your desired width (500px in this example)

  • the left and right columns inherit the remaining page width

#1 - Working Example

html {
  height: 100%;
}
body {
  display: table;
  height: 100%;
  margin: 0;
  width: 100%;
  table-layout: fixed;
  min-width: 800px;
}
body > div {
  display: table-cell;
}
.left {
  background: #000;
}
.middle {
  background: #F00;
  width: 500px;
}
.right {
  background: #F90
}
<div class="left">

</div>

<div class="middle">

</div>

<div class="right">

</div>

Method #2 - with display: inline-block and width: calc(x - y)

Compatibility: Calc is compatible in IE 9 + and most modern browsers. There are javascript fallbacks available as well.

  • The direct div children of body are given display: inline-block and vertical-align: top. They will align themselves to the top of the browser window on the same line

  • The middle column gets its fixed width

  • The left and right columns are given calc(50% - 250px); this calculates 50% of the page width minus half of the width of the fixed middle column.

  • box-sizing: border-box incorporates padding and borders into the width and height

#2 - Working Example

Note how the closing and opening divs tags have no gaps between them; this is to prevent an inline gap between elements.

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  min-width: 800px;
}
body > div {
  display: inline-block;
  width: calc(50% - 250px);
  height: 100%;
  vertical-align: top;
}
.left {
  background: #000;
}
.middle {
  background: #F00;
  width: 500px;
}
.right {
  background: #F90
}
<div class="left"></div><div class="middle"></div><div class="right"></div>

Method #3 - with display: flex

This is a really awesome method, but is not supported with older browsers :(

Compatibility: IE11 and most modern browsers

  • The body gets display: flex and height: 100vh (100% of the viewport height)

  • The direct children get flex: 1 and will grow and shrink

  • The middle column gets its fixed width and flex: 0 0 auto; it will not grow or shrink

Here is a useful guide to Flexbox.

#3 - Working Example

body {
  display: flex;
  height: 100vh;
  margin: 0;
  min-width: 800px;
}
body > div {
  flex: 1;
}
.left {
  background: #000;
}
.middle {
  background: #F00;
  width: 500px;
  flex: 0 0 auto;
}
.right {
  background: #F90
}
<div class="left">

</div>

<div class="middle">

</div>

<div class="right">

</div>

Upvotes: 15

Related Questions