How to layout pages with Div + CSS

Today, web is very popular. Let alone what it is. It seems that DIV + CSS is not a fire. all the major well-known sites updated the original table layout into Div + CSS and named it "this site complies with W3C standards ", in order to make others feel that their website uses the most advanced technology. is Div layout so advanced? This question is still under debate. Here we will not participate in this boring debate. Will it be clear to learn how it feels?
In fact, div layout is not very advanced. If you know a little bit about CSS, it will become simpler. First of all, I want to describe the following points:

1. The DIV here is not what we call the layer. Although their labels are all <div>, here you can
A container that can contain text, images, tables, and so on.
2. to use Div layout, you must accurately analyze the structure of the page. Of course, you must use table to analyze the structure of the page. use Div to distinguish between upper and lower. In fact, the layout of div is only up and down. the analysis structure should be divided into two parts first. The overall page layout should be analyzed first. For example, the general page we use is upper (banner and navigation), middle (page subject content, news, etc ), bottom (copyright information block) structure.

+ ------------------------------------ +
|
| Header |
|
| ------------------------------------ |
|
|
| Midbody |
|
|
|
|
|
| ------------------------------------ |
|
| Foot |
|
+ ------------------------------------ +

So we can place the entire page in a large Div, so we can write the <div> structure as follows:
<Div id = "Container">/* put all content in a large container */
<Div id = "Header">/* on */
</Div>
<Div id = "midbody"> */
</Div>
<Div id = "foot"> */
</Div>
</Div>
Explain what the above ID is. The content behind the ID is the CSS used for the current Div and the content inside the Div. This CSS can be
Specify the DIV width, size, position, and internal text size, style, color, and so on.
Let's take a look at these CSS Code :
/* Page main container style */
# Container {
Width: 90%;/* width */
Margin: 0 auto;/* auto indicates that the boundary auto is automatic. the abbreviated format here is 0,
Automatic left and right */
}
/* Page header */
# Header {
Width: 780px;
Height: 130px;
Margin: 0 auto;
Overflow: hidden;/* prevents the DIV from being opened and hidden when the DIV size exceeds */
Background: #999999;/* Background Color */
}
/* Page center */
# Midbody {
Width: 780px;
Height: auto;
Height: auto;
Margin: 0 auto;
Overflow: hidden;
Background: #990000;
}
/* Bottom of the page */
# Foot {
Width: 780px;
Height: 100px;
Margin: 0 auto;
Background: #99 ffcc;
}

After reading the entire article, we need to study the part. For the part, it is nothing more than the upper-right or lower-right structure. For example
Is left and right.

+ ------------------------------------ +
|
| Header |
|
| ------------------------------------ |
|
| Midbody |
|
| Leftside | rightside |
|
|
|
|
| ------------------------------------ |
|
| Foot |
|
+ ------------------------------------ +

The DIV structure can be written as follows:
<Div id = "Container">
<Div id = "Header">
</Div>
<Div id = "midbody">
<Div id = "leftside">
</Div>
<Div id = "rightside">
</Div>
</Div>
<Div id = "foot">
</Div>
</Div>
The CSS of leftside and rightside In The midbody is:
# Leftside {
Width: 220px;
Float: Left;/* This layer is located on the left of the outer layer */
Height: 500px;
Background: #167692;
}
# Rightside {
Width: 558px;
Height: 500px;
Float: Right;/* the layer is located on the right of the outer layer */
Background: # cccc00;
}
If the structure is as follows:

+ ------------------------------------ +
|
| Header |
|
| ------------------------------------ |
| Rightside |
| Rtop |
|
| Leftside | --------------------------- |
| Rbottom |
| Left | right |
|
|
| ------------------------------------ |
|
| Foot |
|
+ ------------------------------------ +

The DIV structure is:
<Div id = "Container">
<Div id = "Header">
</Div>
<Div id = "midbody">
<Div id = "leftside">
</Div>
<Div id = "rightside">
<Div id = "rtop">
</Div>
<Div id = "rbottom">
<Div id = "Left">
</Div>
<Div id = "right">
</Div>
</Div>
</Div>
</Div>
<Div id = "foot">
</Div>
</Div>
CSS:
# Rtop {
Width: 558px;
Height: 200px
Margin: 0 auto;
Background: # cccc00;
}
# Rbottom {
Width: 558px;
Height: 300px;
Margin: 0 auto;
Background: # ccee00;
}
# Left {
Width: 258px;
Float: left;
Height: 300px;
Background: # cccced;
}
# Rightside {
Width: 300px;
Height: 300px;
Float: right;
Background: # cdfd00;
}
Should it be clear? The principle is the same as that of the outermost layer.
The source file is included in the attachment (index1.html is based on the above example, and index.html is the style of the border line drawn by Div)

 

(From http://blog.csdn.net/allanking666/archive/2009/06/02/4236402.aspx)