Eight create equal height column layouts

The Height equality column is always a requirement for a Web page designer in the design of a page. If all columns have the same background color, it doesn't matter if the height is equal or unequal, because you can just set a background color in the parent element of those columns. However, if one or more columns need to set their own background color individually, the design of its visual integrity is very important. We all know how simple it is to achieve the same high column layout as the table, but it's not easy to use CSS to create a high column layout.

If a design is a fixed width (not a fluid width design), it is quite easy to achieve a high effect of multiple columns. The best technology is to use Dan Cederholm's faux columns technology. As long as a suitable background picture, in your multiple columns of the parent element vertical placement, so as to achieve a false image (false multiple columns, such as high layout effect). But in the fluid layout to use CSS to achieve a high level of design that is not so easy, because we have no way to use the background image to achieve multiple columns such as high false image, then there is no way to achieve it? Of course that's not what happened. Whether it is to achieve a fixed layout or fluid layout, such as multiple columns such as high visual effects, the method is quite a lot, these methods embody the different technologies of CSS, but also vary, the following we will explore the Web page of the multiple columns, such as high implementation technology.

The following methods are all about how we can achieve multiple columns of high visual effects, as shown in the following illustration:

One, the false equal high column

This approach is one of the first ways we can achieve a high column using a background image, using this background image on the parent element of the column to pave the y-axis to achieve a false image of the same height:

Html Markup

				<div class= "Container clearfix" > <div class= "left
					" ></div>
					<div class=  "Content" ></div>
					<div class= "right" ></div>
				</div>

			

Before you make a style, you need a background picture similar to the following:

CSS Code:

				. container {
					Background:url ("Column.png") repeat-y;
					width:960px;
					margin:0 Auto;
					Left {
					float:left;
					width:220px
					}
					. Content {
					float:left;
					width:480px
					}
					. Right {
					float:left;
					width:220px;
					}
			

Advantages:

The implementation method is simple, the compatibility is strong, does not need too many CSS styles to be able to realize easily.

Disadvantages:

Using this method does not fit the layout of high columns such as fluid layout, and you need to recreate the background image if you need to replace the background color or to achieve a high column of other columns.

Second, to the container div use a separate background color (fixed layout)

The implementation of this method is a bit complicated, and if you understand its implementation is fairly straightforward. In this way, we mainly set the background of each column on a separate <div> element. The principle of this method is: The maximum height of any <div> element to support the height of other <div> containers . As shown in the following illustration:

In the above figure, no matter which of our columns is the tallest, then the height of the three containers "rightback,contentback,leftback" varies according to the high columns of the highest column, so let's look at the implementation process together:

Html Markup

							<div class= "Container" >
								<div class= "Rightwrap" >
									<div class= "Contentwrap" >
										<div class= "Leftwrap" >
											<div class= "aside column Leftsidebar" id= "left" ></div>
											<div id= "content "class=" column section "></div>

											<div class=" aside rightsidebat column "id= ' right ' ></div>
										</div>
									</div>
								</div>
							</div>
						

CSS Code:

 <style type= "text/css" > container {width:960px;
								margin:0 Auto;
									}. rightwrap {width:100%;
									Float:left;
									Background:green;
									Overflow:hidden;
								position:relative;
									}. contentwrap {float:left;
									Background:orange;
									width:100%;
									position:relative;
									right:320px;/* This value is equal to the width of Rightsidebar/}. leftwrap{width:100%;
									Background:lime;
									Float:left;
									position:relative;
									right:420px;/* This value equals the width of the content */} #left {float:left;
									width:220px;
									Overflow:hidden;
									position:relative;
								left:740px;
									} #content {float:left;
									width:420px;
									Overflow:hidden;
									position:relative;
								left:740px;
									} #right {float:left; OveRflow:hidden;
									width:320px;
									Position: #333;
									position:relative;
								left:740px; } </style> 

Looks pretty complicated, doesn't it? In fact, you just have to understand how it works will become very simple, you just understand and master the following points:

1. "Div.rightwrap", "Div.contentwrap", "Div.leftwrap" are all closed containers, and "Div#left", "Div#content", "div#right" are the columns we call, and the contents are contained. ；
2. Each container corresponds to a column background color (used to place background color or background picture); This example corresponds to: "Div.rgithwrap" is used to implement the background color of the "div#right" column, and "Div.contentwrap" is used to implement the background color of the "div#content" column ; "Div.leftwrap" is used to implement the background color of the "div#left" column;
3. In addition to the outermost containers (that is, the corresponding leftmost column container), I position them relative to each other and set their right values, which are equal to the corresponding column widths. In this case, "div.contentwrap" corresponds to the width of "div#right", and "Div.leftwrap" applies exactly to the width of "div#content";
4. Make a left float for each column and set its column width
5. Sets the relative positioning for each column and makes a "left" setting, and the value of "left" is equal to the sum of all columns except the first column. in this example, the value of "left" equals the sum of the widths of the columns "Div#right" and "div#content", that is, 320px+420=740px