Recommendation: Implementation of three-column adaptive height layout in Web pages

Web page | adaptive

Three-column layout, a fixed-width left column is the navigation column, the right column can put Google Ads or Flickr album, Adaptive width of the middle column is the main content.

　　Characteristics:

• There is an adaptive width between the middle column and the fixed width of the column.
• The main contents of the middle column appear first in the Web page.
• You can allow the contents of any one column to be the highest.
• Very simple CSS and minimal hacks.

　　Step 1: Build the structure

Start with header, footer, and container first.

<div id= "Header" ></div>
<div id= "Container" ></div>
<div id= "Footer" ></div>

Give container a left-right inner patch that is the width of the left and right columns.

#container {
padding-left:200px; * LC Width * *
padding-right:150px; /* RC Width * *
}

The layout is now shown below:

　　Step 2: Add column

Add left, middle, and right columns based on existing layouts

<div id= "Header" ></div>
<div id= "Container" >
<div id= "center" class= "column" ></div>
<div id= "left" class= "column" ></div>
<div id= "Right" class= "column" ></div>
</div>
<div id= "Footer" ></div>

Then add width and float, the bottom of the footer must clear float, keep it in the most below.

#container. Column {
Float:left;
}
#center {
width:100%;
}
#left {
width:200px; * LC Width * *
}
#right {
width:150px; /* RC Width * *
}
#footer {
Clear:both;
}

The results of the code now running are as follows, because the left and right columns are squeezed below the #center, due to the #container padding and #center100%, which is not what we want.

　　Step 3: Position the left column

Take two steps to the left column positioning, first to the left column of a-100% left edge, equivalent to the width of the middle bar, at this time, the left and the middle column coincide, share its left edge, the following figure.

#left {
width:200px; * LC Width * *
Margin-left:-100%;
}

Then use the relative positioning method to position the left column to the right 200PX (that is, the width of the left column).

#container. Columns {
Float:left;
position:relative;
}
#left {
width:200px; * LC Width * *
Margin-left:-100%;
right:200px; * LC Width * *
}

Now the left column position is exactly the #container left-inside patch.

　　Step 4: Position the right column

Position the right column in the right corner of the #container, as long as you set the negative right edge of the right column.

#right {
width:150px; /* RC Width * *
Margin-right: -150px; /* RC Width * *
}

The empty area in the layout is now gone.

　　Step 5: The final perfection

At this point, the layout has been basically completed, but if the minimum size of the browser is smaller than the center width, then the left column will be very small, so to set a minimum width, unfortunately, ie does not support now. 800x600, no problem.

Body {
min-width:550px; /* 2x LC width + RC Width * *
}

The fourth step to complete the code in IE left column will disappear, now to do is to set the left column to its correct position up.

* HTML #left {
left:150px; /* RC Width * *
}

　　Margin of content

We need to give the content an inner patch (10PX), otherwise, the text will be top.

The total width of the column is equal to (padding+width).

#left {
width:180px; /* LC fullwidth-padding * *
Padding:0 10px;
right:200px; /* LC Fullwidth * *
Margin-left:-100%;
}

For ie5.x, you should use a hacks.

Body {
min-width:630px; /* 2x (LC Fullwidth +
CC padding) + RC fullwidth * *
}
#container {
padding-left:200px; /* LC Fullwidth * *
padding-right:190px; /* RC Fullwidth + CC padding * *
}
#container. Column {
position:relative;
Float:left;
}
#center {
padding:10px 20px; /* CC padding * *
width:100%;
}
#left {
width:180px; * LC Width * *
Padding:0 10px; /* LC padding * *
right:240px; /* LC Fullwidth + CC padding * *
Margin-left:-100%;
}
#right {
width:130px; /* RC Width * *
Padding:0 10px; /* RC padding * *
Margin-right: -190px; /* RC Fullwidth + CC padding * *
}
#footer {
Clear:both;
}
/*** IE Fix ***/
* HTML #left {
left:150px; /* RC Fullwidth * *
}

　　Highly adaptive

#container {
Overflow:hidden;
}
#container. Column {
padding-bottom:20010px; * * X + padding-bottom * *
Margin-bottom: -20000px; * * X * *
}
#footer {
position:relative;
}

This code originates from adapted wholesale.

Unfortunately, opera does not yet support #container's overflow, expecting version 9.

Now IE can not really adaptive height, but also to add the following code, if you need to #footer, you can add a div (#footer外面).
<div id= "Footer-wrapper" >
<div id= "Footer" ></div>
</div>

* HTML Body {
Overflow:hidden;
}
* HTML #footer-wrapper {
Float:left;
position:relative;
width:100%;
padding-bottom:10010px;
Margin-bottom: -10000px;
Background: #fff; /* Same as Body
Background *
}