<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>This is header.</header>
<section>
<div class="main">
<h3>This is main section.</h3>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
</div>
<aside class="left">
<h3>left menu.</h3>
<ul>
<li>
<a href="">link1</a>
</li>
<li>
<a href="">link2</a>
</li>
<li>
<a href="">link3</a>
</li>
<li>
<a href="">link4</a>
</li>
</ul>
</aside>
<aside class="right">
<h3>Right menu.</h3>
<ul>
<li>
<a href="">link1</a>
</li>
<li>
<a href="">link2</a>
</li>
<li>
<a href="">link3</a>
</li>
<li>
<a href="">link4</a>
</li>
</ul>
</aside>
</section>
</body>
</html>
1 *{
2 box-sizing: border-box;
3 }
4
5 body{
6 background: #e1ddd9;
7 }
8
9 header, footer, .main, aside{
10 background: #fff;
11 padding: 10px;
12 margin-bottom: 10px;
13 }
14
15 section{
16 overflow: hidden;
17 padding-left: 210px;
18 padding-right: 210px;
19 }
20
21 section .main, section aside{
22 float: left;
23 }
24
25 section .main{
26 widows: 100%;
27 }
28
29 section aside.left{
30 width: 200px;
31 margin-left: -100%;
32 position: relative;
33 left: -210px;
34 }
35
36 section aside.right{
37 width: 200px;
38 margin-left: -200px;
39 position: relative;
40 left: 210px;
41 }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<h1>This is header.</h1>
</header>
<div class="main">
<div class="main-inner">
<h3>This is main section.</h3>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
<p>This is p.</p>
</div>
</div>
<aside class="left">
<h3>left menu.</h3>
<ul>
<li>
<a href="">link1</a>
</li>
<li>
<a href="">link2</a>
</li>
<li>
<a href="">link3</a>
</li>
<li>
<a href="">link4</a>
</li>
</ul>
</aside>
<aside class="right">
<h3>Right menu.</h3>
<ul>
<li>
<a href="">link1</a>
</li>
<li>
<a href="">link2</a>
</li>
<li>
<a href="">link3</a>
</li>
<li>
<a href="">link4</a>
</li>
</ul>
</aside>
<footer>
<h1>This is footer.</h1>
</footer>
</body>
</html>
*{
box-sizing: border-box;
}
body{
background: #e1ddd9;
}
header, footer, .main, aside{
background: #fff;
padding: 10px;
margin-bottom: 10px;
}
.main, aside{
float: left;
}
.main{
float: left;
width: 100%;
overflow: hidden;
}
.main-inner{
margin: 0 210px;
}
aside.left{
width: 200px;
margin-left: -100%;
}
aside.right{
width: 200px;
margin-left: -200px;
}
footer{
clear: both;
}
