Common methods and techniques for div + CSS webpage Layout

Source: Internet
Author: User

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;

}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.