CSS implements Holy Grail layout (two columns fixed - middle column floating - middle column div ranked in front) - Detailed explanation_html/css_WEB-ITnose

Holy Grail layout: two columns fixed - middle column floating - middle column div ranked first. The advantage is that when the network speed is slow, the content column can be displayed first

< ;div id="left" class="column">

An additional DIV contains our three layers. This structure conforms to my focus on integrating the content into one tag. The custom
style is very simple. The left sidebar is 200PX and the right side is 150. For simplicity, LC, RC and CC represent the left, right and middle respectively. The style is as follows:

body {
min-width: 550px; /* 2x LC width RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; / * RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}

Principle
In fact, the trick is very simple. Let the left column and the padding on the left side of the wrap, and the right column and the right padding of the wrap. Just leave the adaptive content layer in the middle. The left occupies the padding-left of the wrap; the right occupies the padding of the wrap. padding-right