2-columns or 3-columns layout css

layout-css.md

• Columns are calculated by percent (not pixel): using float and width: x% for each columns. It suits for columns

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="clear"></div>
</div>

.left {
  width: 30%;
  float: left;
}
.right {
  width: 70%;
  float: right;
}
.clear {
  clear: both;
}

• Columns have fixed width (pixel), remaining column take remaining space: using margin-left or margin-right and position: absolute

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

.container {
  position: relative;
}
.left {
  width: 300px;
  position: absolute;
}
.right {
  margin-left: 300px; // equal to width of .left
}

• Columns have fixed width (pixel), remaining column take remaining space: using margin-left or margin-right and float. I think the way and above are same. ref: http://stackoverflow.com/questions/5573855/how-to-make-a-stable-two-column-layout-in-html-css
• Using flex if you just support IE >= 10. Ref: https://davidwalsh.name/flexbox-column