Code:
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<style type="text/css">
body {
background-color: #DDDDDD;
text-align:center;
}
body, td, div, ul, button, textarea, input {
font: 12px helvetica,arial,sans-serif;
}
#header1 {
background-color: #FD0000;
}
#headertext {
font-size:40px;
}
#header2 {
background-color: #C90000;
}
#page {
background-color: white;
border: 1px solid black;
width: 800px;
margin: 0 auto;
}
#page:after {
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
#menuleft {
float:left;
border-right:1px solid black;
width:200px;
}
#menuright {
float:right;
border-left:1px solid black;
width:200px;
}
#container {
text-align:left;
margin-left:1px;
width:auto;
}
#category {
background-color: #c8d7e3;
width:200px;
}
a.menubutton {
display:inline;
margin: 1px;
background-color:#D80000 ;
width:90px;
}
a.menubutton:hover {
background-color:#C00000;
}
</style>
</head>
<body>
<div id="header1">
<span id="headertext">Header</span>
</div>
<div id="header2">
<a href="#" class="menubutton">Menu</a>
<a href="#" class="menubutton">Menu</a>
</div>
<div id="page">
<div id="menuleft">
<span id="category">
Category 1<br>
</span>
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
</div>
<span id="container">
Container
</span>
<div id="menuright">
Right
</div>
</div>
</body>
</html>
Comment