A detailed description of the three-column layout using CSS fixed width

The left-right three-column page layout is very common, so let's take a look at the CSS fixed-width three-column layout using example parsing, including equal-width equidistant arrangement methods:

Fixed width three column layout
This is very basic, we can see the code directly to understand:

<p id= "wrapper" > <p id= "header" >header</p> <p id= "Body" class= "CLS" > <p id= "aside" > <p class= "inner" > aside &LT;BR&GT;&LT;BR&GT;&LT;BR&GT;&LT;BR&GT;&LT;BR&GT;&LT;BR&GT;&LT;BR&GT;&LT;BR&GT;&LT;BR&G T;<br><br><br><br><br><br><br><br><br> </p> </p > <p id= "Content" class= "CLS" > <p id= "main" > <p class= "inner" > main <br><br ><br><br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br> </p> </p> <p id= "Content-aside" > <p class= "inner" > Content-aside <br><br><br><br><br><br><br><br&gt ;<br><br><br><br><br><br><br><br><br><br> </p > </p> </p> </p> <p id= "FooteR ">footer</p></p> 

#header {width:980px; height:90px; margin:0 auto; background: #f60;}   #body {width:980px; margin:0 auto;}   #aside {float:left; width:240px; background: #ccc;}   #content {margin-left:240px;}   #main {float:left; width:540px; background:pink;}   #content-aside{  float:left; width:200px; background:orange;}   #footer {width:980px; height:90px; margin:0 auto; background: #08f;}

Example: implementation of a three-column picture, such as wide-spaced layout

Each picture block left floats, width 30%, left margin 2.5%:
100%= (2.5%+30%) + (2.5%+30%) + (2.5%+30%) +2.5%

<! DOCTYPE html>    

width:30%; Represents 30% of the width of the parent element.
height:30%; If the height of the parent element is not set, the height is not effective.
To implement a responsive square, you can use the unit VW (Viewport Width):

. square {        width:30%;        HEIGHT:30VW;        Background:url ("byd.jpg") no-repeat Scroll center 0 transparent;        background-size:100% 100%;        margin:2.5% 0 0 2.5%;        Float:left;    }

However, it is important to note that both low-version IE and low-version Android/ios browsers do not support Windows (viewport) units.
Or use JS according to the wide setting high, ensure compatibility:

<script src= "Jquery.js" ></script>    <script>    $ (document). Ready (function () {        $ ("img") . Height ($ ("img"). width ());    });    $ (window). Resize (function () {        $ ("img"). Height ($ ("img"). width ());    });    </script>

A percent layout can also be seen as a responsive layout.
The simple and practical percentage layout is also suitable for mobile WAP page layouts:

min-width:320px;    max-width:980px;    width:100%;    Overflow-x: Hidden;    margin:0 Auto;

The 
 Minimum width is 320px, the maximum width is 980px, the width is automatically adjusted between 320px and 980px, and looks fine. The 
 only uses the width attribute percent value in the  tag, such as width= "40%", without setting the Height property, so that the picture can be scaled by its original scale. 
 The blocks inside the container can also be arranged in percentages, such as 60% on the left and 40% on the right.