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%;
}