Technical Summary:

  1. Use float layouts
  2. Use margin negative values on both sides to overlap the middle content horizontally
  3. 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