Common methods and techniques for div + CSS webpage Layout

Common CSS layout MethodsFloat: None | left | right

 

Valid value:

None: default value. Objects are not float

Left: Right of the text flow object

Right: Left side of the text flow object

How does it work? Let's look at an example of one row and two columns.

XHTML code:Example source code

 

<Div id = "Wrap">

<Div id = "column1"> here is the first column </div>

<Div id = "column2"> here is the second column </div>

<Div class = "clear"> </div>/* this is against the web standard intent, just to explain that the elements under it need to be cleared */

</Div>

CSS code:Example source code

 

# Wrap {width: 100; Height: auto ;}

# Column1 {float: Left; width: 40 ;}

# Column2 {float: Right; width: 60 ;}

. Clear {clear: Both ;}

Position: static | absolute | fixed | relative

 

Valid value:

Static: default value. No special positioning. Objects follow HTML positioning rules.

Absolute: drag an object out of the Document Stream and use left, right, top, bottom, and other attributes to absolutely locate the parent object with the most positioning settings relative to the object closest to it. If such a parent object does not exist, it is based on the body object. Its stack is defined by the Z-index attribute.

Fixed: not supported. Object positioning follows the absolute (absolute) method. But comply with some rules

Relative: objects cannot be stacked, but will be offset in normal document streams based on left, right, top, bottom, and other attributes.

It is used to implement the example of one row and two columns.

XHTML code:Example source code

 

<Div id = "Wrap">

<Div id = "column1"> here is the first column </div>

<Div id = "column2"> here is the second column </div>

</Div>

CSS code:Example source code [www.52css.com]

 

# Wrap {position: relative;/* Relative Position */width: 770px ;}

# Column1 {position: absolute; top: 0; left: 0; width: 300px ;}

# Column2 {position: absolute; top: 0; Right: 0; width: 470px ;}

What are their differences?

 

Apparently, float is relatively positioned, and will change with the browser size and resolution, but the position will not work, so it is usually the float layout!

Examples of common CSS la s

 

Single Row and one column

Example source code

Body {margin: 0px; padding: 0px; text-align: center ;}

# Content {margin-left: auto; margin-Right: auto; width: 400px ;}

Two rows and one column

Example source code

Body {margin: 0px; padding: 0px; text-align: center ;}

# Content-top {margin-left: auto; margin-Right: auto; width: 400px ;}

# Content-end {margin-left: auto; margin-Right: auto; width: 400px ;}

Three rows and one column

Example source code

Body {margin: 0px; padding: 0px; text-align: center ;}

# Content-top {margin-left: auto; margin-Right: auto; width: 400px; width: 370px ;}

# Content-mid {margin-left: auto; margin-Right: auto; width: 400px ;}

# Content-end {margin-left: auto; margin-Right: auto; width: 400px ;}

Single Row and two columns

Example source code

# Bodycenter {width: 700px; margin-Right: auto; margin-left: auto; overflow: auto ;}

# Bodycenter # dv1 {float: Left; width: 280px ;}

# Bodycenter # dv2 {float: Right; width: 420px ;}

 

Two rows and two columns

Example source code

# Header {width: 700px; margin-Right: auto; margin-left: auto; overflow: auto ;}

# Bodycenter {width: 700px; margin-Right: auto; margin-left: auto; overflow: auto ;}

# Bodycenter # dv1 {float: Left; width: 280px ;}

# Bodycenter # dv2 {float: Right; width: 420px ;}

Three rows and two columns

Example source code

# Header {width: 700px; margin-Right: auto; margin-left: auto ;}

# Bodycenter {width: 700px; margin-Right: auto; margin-left: auto ;}

# Bodycenter # dv1 {float: Left; width: 280px ;}

# Bodycenter # dv2 {float: Right; width: 420px ;}

# Footer {width: 700px; margin-Right: auto; margin-left: auto; overflow: auto; clear: Both ;}

Single Row and three columns

Absolute Positioning

Example source code

# Left {position: absolute; top: 0px; left: 0px; width: 120px ;}

# Middle {margin: 0px1_px0px1_px ;}

# Right {position: absolute; top: 0px; Right: 0px; width: 120px ;}

Float positioning 1Example source code

XHTML code:

 

<Div id = "Wrap">

<Div id = "column">

<Div id = "column1"> here is the first column </div>

<Div id = "column2"> here is the second column </div>

<Div class = "clear"> </div>/* usage of web standards is not recommended, but remember that the following elements need to be cleared */

</Div>

<Divid = "column3"> the third column </div>

<Divclass = "clear"> </div>/* usage of web standards is not recommended, but remember that the following elements need to be cleared */

</Div>

CSS code:Example source code

 

# Wrap {width: 100; Height: auto ;}

# Column {float: Left; width: 60 ;}

# Column1 {float: Left; width: 30 ;}

# Column2 {float: Right; width: 30 ;}

# Column3 {float: Right; width: 40 ;}

. Clear {clear: Both ;}

Float Location 2

 

XHTML code:

Example source code

<Div id = "center" class = "column">

<H1> thisisthemaincontent.

</Div>

<Div id = "Left" class = "column">

<H2> thisistheleftsidebar. </H2>

</Div>

<Div id = "right" class = "column">

<H2> thisistherightsidebar. </H2>

</Div>

CSS code:

Example source code

Body {

Margin: 0;

Padding-left: 200px;/* lcfullwidth */

Padding-Right: pixel PX;/* rcfullwidth ccpadding */

Min-width: 200px;/* lcfullwidth ccpadding */

}

. Column {

Position: relative;

Float: left;

}

# Center {

Width: 100;

}

# Left {

Width: 200px;/* lcwidth */

Right: 200px;/* lcfullwidth */

Margin-left:-100;

}

# Right {

Width: pixel PX;/* rcwidth */

Margin-Right:-100;

}