Inner left and right bar : Siderbar « CSS Controls « HTML / CSS
- HTML / CSS
- CSS Controls
- Siderbar
Inner left and right bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer {
width: 760px;
position: relative;
border: 1px solid #000;
}
h1#header {
border: 1px solid #000;
height: 100px;
color: #fff;
}
h2#sub-header {
border-bottom: 1px solid #000;
background: #ccc;
height: 1.5em;
line-height: 1.5em;
color: #fff;
}
#left {
float: left;
width: 558px;
}
#right {
float: right;
width: 190px
}
.left-content,.right-content {
border: 1px solid #000;
background: #aaa;
margin: 15px
}
.right-content {
background: #bbb;
margin: 15px 13px 15px 0
}
.left-content-header,.right-content-header {
padding: 5px;
color: #fff;
background: #ccc;
border-bottom: 1px solid #000;
}
.right-content-header {
height: auto;
}
.left-content-footer {
border-top: 1px solid #000;
background: #fff;
}
#footer {
clear: both;
height: 40px;
border-top: 1px solid #000;
}
</style>
</head>
<body>
<div id="outer">
<h1 id="header">Header</h1>
<h2 id="sub-header">Sub Header Text</h2>
<div id="left">
<div class="left-content">
<div class="left-content-header">blog header text</div>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<div class="left-content-footer">
<p>Footer text</p>
</div>
</div>
</div>
<div id="right">
<div class="right-content">
<div class="right-content-header">blog header text</div>
<p>right content</p>
<p>right content</p>
<p>right content</p>
<p>right content</p>
<p>right content</p>
<p>right content</p>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Related examples in the same category