N ways to make a two-column layout

Our html content:

<div id="sidebar">sidebar</div>
<div id="content">
This is the beginning of content div.

 <img class="cat-img" alt="" src="http://eofdreams.com/data_images/dreams/cat/cat-08.jpg" />

This is a very large page of content.

I mean. Really.

Really really large.</div>

First way (not sure about cross-browser):

#sidebar {
background: pink;
float: left;
}

#content {
background: yellow;
overflow: hidden;
}

First way, complete version. Note both html and body needs to have height:100%

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

#sidebar {
  background: pink;
  float: left;
  height: 100%;
}

#content {
  background: yellow;
  overflow: hidden;
  height: 100%;
}

Second way, use display:table, and display:table-cell. Bonus point: now you can use vertical-align:middle to vertical-align text in #sidebar.
Note:

  • Vertical-align on a display:table-cell means where to display INNER content relative to the height of the table-cell.
  • Vertical-align on a display:inline-block means where to display NEIGHBOURS relative to the height of the inline-block.
body {
  display: table;
  margin: 0;
}

#sidebar {
  display: table-cell;
  background: yellow;
}

#content {
  display: table-cell;
  background: gray;
}

Third way, use flex. Only available in modern browsers. But allow each children to distribute according to flex-ratios
. Check compatibility with http://caniuse.com/


#page {
 display: -webkit-flex;
 -webkit-flex-direction: row;
}

#sidebar {
 background: pink;
 -webkit-flex: 1;
}

#content {
 background: gray;
 -webkit-flex: 2;
}

Add this awesome reference: http://www.boutell.com/newfaq/creating/threecolumnlayout.html

Advertisements
Standard