Tuesday, March 20, 2012

Doing Page Layouts without Tables

<style type="text/css">
#container {
  min-width: 800px;
}

#leftColumn {
  float: left;
  width: 300px;
  height: 100%;
  background-color:red;
}

#middleColumn {
  background-color:green;
  height: 100%;
}

#rightColumn {
  float: right;
  width: 300px;
  height: 100%;
  background-color:blue;
}
</style>

<div id="container">
  <div id="rightColumn">
    Right Column, Right Column, Right Column,
    Right Column, Right Column, Right Column,
    Right Column, Right Column, Right Column
  </div>
  <div id="leftColumn">
    Left Column, Left Column, Left Column,
    Left Column, Left Column, Left Column,
    Left Column, Left Column, Left Column
  </div>
  <div id="middleColumn">
    Middle Column, Middle Column, Middle Column,
    Middle Column, Middle Column, Middle Column,
    Middle Column, Middle Column, Middle Column
  </div>
</div>
http://stephenwalther.com/blog/archive/2012/03/19/metro-introduction-to-css-3-grid-layout.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+StephenWalther+%28Stephen+Walther%29

No comments:

Post a Comment