Technical Summary:
- Use float layouts
- Use margin negative values on both sides to overlap the middle content horizontally
- To prevent the middle content from being covered by both sides, use padding and margin respectively
Grail layout is complex, using position: relative
The holy grail layout
HTML
<div id="head"> head </div>
<div id="container" class="clearfix">
<div id="main" class="column">main </div>
<div id="left" class="column"> left 220px </div>
<div id="right" class="column"> right 200px </div>
</div>
<div id="footer"> footer </div>
Copy the code
CSS
body { min-width: 800px; } #container {/* 3. */ padding: 0 300px 0 200px; }.column {/* 1. Use float */ float: left; text-align: center; min-height: 200px; } #left { width: 200px; background-color: red; /* 2. Margin-top margin-left: -100%; margin-top margin-left: -100%; margin-top margin-left: -100%; /* Position: relative; left: -200px; } #main { background-color: blue; width: 100%; } #right { width: 300px; background-color: #99f; margin-right: -300px; } #footer, #header {text-align: center; background-color: #f9f; } /* clear float */ #footer {clear: both; } /* Manually write clear float */ /*. Clearfix :after {content: "; display: table; clear: both; } * /Copy the code
The source code
Twin wing layout
HTML
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
Copy the code
CSS
body { min-width: 550px; }.col {/*1. Use float*/ float: left; } #main { width: 100%; height: 200px; background-color: #ccc; } #main-wrap {/* 3. Use padding */ margin: 0 190px 0 190px; } #left { width: 190px; height: 200px; background-color: #0000FF; Margin-left: -100%; margin-left: -100%; } #right { width: 190px; height: 200px; background-color: #FF0000; Margin-left: -190px; margin-left: -190px; }Copy the code
The source code