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