The use of DIV+CSS to achieve several classic layout of the detailed, style and code! __div

One, left and right sides, fixed width of 200px on the left-hand side, adaptive occupied full

HTML code

	<div class= "Divbox" >
		<div class= "left" ></div>
		<div class= "right" ></div>
	</div>

CSS Code

		*{
			margin:0px;
			padding:0px
		}
		. divbox{
			height:500px;
			Background:yellow
		}
		. left{
			Float:left;
			width:200px;
			height:100%;
			Background:red
		}
		. right{
			margin-left:200px;
			Background:green;
			height:100%;
		}

This implementation is relatively simple, the left Div to float, the right side of the divmargin-left so that it from the left side of the div to show the right, plus the background color to facilitate observation.

Two, left middle right three columns, about 200px fixed, the middle of adaptive occupied

HTML code

	<div class= "Divbox" >
		<div class= "left" ></div>
		<div class= "right" ></div>
		<div class= "center" ></div>
	</div>

CSS Code

                *{
			margin:0px;
			padding:0px
		}
		. divbox{
			Background:yellow;
			height:500px
		}
		. left{
			background:red;
			Float:left;
			width:200px;
			height:100%
		}
		. center{/
			* The first float, plus left and right margins, do not have 
				to be absolutely positioned here I recommend that you write in HTML in front of center, if in order to write will squeeze right into the following, interested can try it yourself
			/*margin:0 200px;*/

			/* Second use floating plus absolute positioning * *
			/*position:absolute;
			left:200px;
			right:200px;*/

			Background:grey;
			height:500px
		}
		. right{
			Background:green;	
			Float:right;
			width:200px;
			height:100%;
		}

Third, the next three lines, the head 200px high, the bottom 200px high, the middle of the adaptive occupied

HTML code

        <div class= "Divbox" >
		<div class= "Top" ></div>
		<div class= "center" ></div>
		<div class= "Bottom" ></div>
	</div>

CSS Code

		*{
			margin:0px;
			padding:0px
		}
		. divbox{
			Background:yellow;
			width:100%
		}
		. top{
			background:red;
			width:100%;
			height:200px;
			Position:absolute;
			top:0
		}
		. center{
			width:100%;
			Background:grey;
			Position:absolute;
			top:200px;
			bottom:200px
		}
		. bottom{
			width:100%;
			Background:green;	
			height:200px;
			Position:absolute;
			bottom:0;
		}

Here we use the absolute positioning, set the above and the following respectively top:0,bottom:0 Fixed in the upper and lower ends, the middle distance up and down 200px.

Four, up and down two parts, the bottom of the fixed height of 200px, if the content is less, then this footer is fixed at the bottom, if the content of more, footer squeezed down

HTML code

	<div class= "Divbox" >
		<div class= "content" ></div>
		<div class= "Footer" ></div>
	</div>

CSS Code

		*{
			margin:0px;
			padding:0px;
		}
		html{
			height:100%;
		}
		body{
			min-height:100%;
			Position:relative
		}
		. content{
			width:100%;
			background:red;
			padding-bottom:200px
		}
		. footer{
			width:100%;
			height:200px;
			Background:green;
			Position:absolute;
			bottom:0;
		}

Fixed footer at the bottom and the foorter down to go is easier to achieve, but together, it is not easy to get it, in fact, it is not difficult to change the content of the height, you can see the effect of

The necessary setting is to have the height of HTML, the minimum height of the body to have, footer is in accordance with the body of absolute positioning,

It's not hard to realize that.

These are just some of the ways to implement a classic layout, and there are other ways to do it.