2006-07-31

CSS Basic layout

This has:
  • Top div, includes logo and "slogan"
  • Left side menu bar
  • Main content
Surely not foolproof but it works. position: absolute and margin-{top,left}: {px,%} are used in positioning.
body {
  font-family: verdana, "trebuchet MS", helvetica, sans-serif;  
  margin: 35px;
  text-align: center; /* IE hack */
}

img { border: 0px; }

#main {
  margin: 0 auto 0 auto;
  text-align: left;
}

#top {
  position: absolute;
  margin: 0px;
  height: 100px;
}

#logo { float: left; }

#slogan {
  float: right;
  font-size: large;
  font-weight: bold;
  margin-right: 35px;
  margin-top: 35px;
}

#menu {
  position: absolute;
  float: left;
  width: 25%;
  margin-top: 120px;
}

#content {
  position: absolute;
  padding: 5px;
  margin-top: 120px;
  margin-left: 25%;
  width: 70%;
}