CSS + Div

1. Common CSS layout methods:
Float: 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:

 
<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, I just want to explain that the elements under it need to clear the floating */</div>
 

CSS:

 
# 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:

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

CSS:

 
# Wrap {position: relative;/* relative positioning */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!

2. Examples of common CSS la s

One column
Single Row and one column

Body {margin: 0px; padding: 0px; text-align: center ;}# content {margin-left: auto; margin-Right: auto; width: 400px ;}
 

Two rows and one column

 
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

 
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 ;}
 

Two columns

Single Row and two columns

# 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

 
# 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

 
# 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 ;}
 

Three columns

Single Row and three columns

Absolute Positioning

 
# Left {position: absolute; top: 0px; left: 0px; width: 120px ;}# middle {margin: 0px running PX 0px running PX ;}# right {position: absolute; top: 0px; Right: 0px; width: 120px ;}
 

Float positioning
XHTML:

 
<Div id = "Wrap"> <Div id = "column"> <Div id = "column1"> the first column </div> <Div id = "column2"> the second column </div> <Div class = "clear"> </div>/* is not recommended for Web standard usage, but remember that the following elements need to be cleared */</div> <Div id = "column3"> here is the third column </div> <Div class = "clear"> </Div >/* the usage of web standards is not recommended, but remember that the following elements need to be cleared */</div>
 

CSS:

 
# 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

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

 
Body {margin: 0; padding-left: 200px;/* LC fullwidth */padding-Right: 190px;/* RC fullwidth + CC padding */min-width: 200px; /* LC fullwidth + CC padding */}. column {position: relative; float: Left ;}# center {width: 100% ;}# left {width: 200px;/* LC width */right: 200px; /* LC fullwidth */margin-left:-100%;} # right {width: pixel PX;/* RC width */margin-Right:-100% ;} /*** ie fix ***/* html # Left {left: pixel PX;/* RC fullwidth */}
 
<Br/> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> the holy grail of layouts: Example #4: A list apart </title> <br/> <style type = "text/CSS"> </P> <p>/*** the essential code ***/< /P> <p> body {<br/> margin: 0; <br/> padding-left: 200px;/* LC fullwidth */<br/> padding-Right: 190px; /* RC fullwidth + CC padding */<br/> Min-width: 200px; /* LC fullwidth + CC padding */<br/>}</P> <p> # header, # footer {<br/> margin-left:-200px; /* LC fullwidth */<br/> margin-Right:-pixel PX;/* RC fullwidth + CC padding */<br/>}</P> <p>. column {<br/> position: relative; <br/> float: Left; <br/>}</P> <p ># center {<br/> width: 100%; <br/>}</P> <p> # Left {<br/> width: 200px;/* LC width */<br/> right: 200px; /* LC fullwidth */<br/> margin-left:-100%; <br/>}</P> <p ># right {<br/> width: pixel PX; /* RC width */<br/> margin-Right:-100%; <br/>}</P> <p> # footer {<br/> clear: both; <br/>}</P> <p>/*** ie fix ***/<br/> * html # Left {<br/> left: pixel PX; /* RC fullwidth */<br/>}< br/>/*** just for looks ***/</P> <p> body {<br/> background: # FFF; <br/>}</P> <p> # header, # footer {<br/> font-size: Large; <br/> text-align: center; <br/> padding: 0.3em 0; <br/> Background: #999; <br/>}</P> <p> # Left {<br/> Background: # 66f; <br/>}</P> <p> # center {<br/> Background: # DDD; <br/>}</P> <p> # right {<br/> Background: # f66; <br/>}</P> <p>. column {<br/> padding-top: 1em; <br/> text-align: justify; <br/>}</P> <p> </style> <br/> </pead> </P> <p> <body> </P> <p> <Div id = "Header"> This is the header. </div> </P> <p> <Div id = "center" class = "column"> <br/> <p> This is the main content. </p> <br/> <p> lorem ipsum dolor sit Amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore Magna aliquam erat volutpat. ut wisi enim ad minim veniam, Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex EA commodo consequat. DUIs autem vel Eum iriure dolor in hendrerit in vulputate Velit esse molestie consequat, vel illum dolore EU feugiat nulla facilisis at Fig. </P> <br/> <p> lorem ipsum dolor sit Amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore Magna aliquam erat volutpat. ut wisi enim ad minim veniam, Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex EA commodo consequat. DUIs autem vel Eum iriure dolor in hendrerit in vulputate Velit esse molestie consequat, vel illum dolore EU feugiat nulla facilisis at Fig. </P> <br/> </div> </P> <p> <Div id = "Left" class = "column"> </P> <p> <p> This is the left sidebar. </H2> <br/> <p> lorem ipsum dolor sit Amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore Magna aliquam erat volutpat. ut wisi enim ad minim veniam, Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex EA commodo consequat. DUIs autem vel Eum iriure dolor in hendrerit in vulputate Velit esse molestie consequat, vel illum dolore EU feugiat nulla facilisis at Fig. </P> <br/> </div> </P> <p> <Div id = "right" class = "column"> <br/> <H2> This is the right sidebar. </H2> <br/> <p> lorem ipsum dolor sit Amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore Magna aliquam erat volutpat. ut wisi enim ad minim veniam, Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex EA commodo consequat. DUIs autem vel Eum iriure dolor in hendrerit in vulputate Velit esse molestie consequat, vel illum dolore EU feugiat nulla facilisis at Fig. </P> <p> </div> </P> <p> <Div id = "footer"> This is the footer. </div> </P> <p> </body> </P> <p> </ptml> </P> <p>
  [Ctrl + A select all prompt: you can modify the part first Code , And then press run]
 Two rows and three columns 
 
XHTML:
 

 
<Div id = "Header"> This is the top line </div> <Div id = "warp"> <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> <div id = "column3"> here is the third column </div> <Div class = "clear"> </div>
 
 
CSS:
 

 
# Header {width: 100%; Height: auto;} # 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 ;}
 
 
Three rows and three columns
 

 
XHTML:
 

<Div id = "Header"> This is the top line </div> <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> <div id = "column3"> here is the third column </div> <Div class = "clear"> </div> <Div id = "footer"> here is the bottom line </div>
 
 
CSS:
 

 
# Header {width: 100%; Height: auto;} # 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 ;}# footer {width: 100%; Height: auto ;}
 
 
PS: Common examples are listed here, not for research purposes. For each box, I have not set attributes such as margin, padding, and boeder, because I personally think, when positioning the width, it is better to use them unless you have to, because if not, solving the browser compatibility problem will cause you a headache and generate a series of CSS code, I think this is not efficient and effective!
 

3. Advanced CSS layout skills
Margin and padding are always used. How can we solve the problems? Because the browser explains the container width differently:
IE 6.0 Firefox opera is
True width = width + padding + border + margin
Ie5.x
True width = width-padding-border-margin
 

 
IE doubled float-margin bug. here we need to solve the specific problem. The following is a solution.
Www.forest53.com/tutorials/tutorials_show.asp? Id = 31
 

 
Obviously, the first option is perfect. In the second case, the result is miserable!
 

 
The solution is hack.
 

Div. content {width: 400px; // This is the incorrect width. all browsers read voice-family :"\"}\""; // ie5.x/win ignores the voice-family: Inherit content after "\"} \ "; width: 300px; // Some browsers including IE6/win read this sentence. The new value (PX) overwrites the old one} HTML> body. content {// html> body is written in width: 300px by css2; // a browser that supports css2 (not ie5) has the honor to read this sentence} Div. content {width: 300px! Important; // This is the correct width, most of which are supported! The browser marked by important uses the value width (Space)/**/: 400px; // IE6/win does not parse this sentence, therefore, IE6/win still thinks that the width value is 300px. When ie5.x/win reads this sentence, the new value (400px) overwrites the old one because! Important tag does not work for them} HTML> body. content {// html> body is written by css2 with width: 300px; // the browser that supports css2 has the honor to read this sentence}
 
 
For more information, click the following link.
 

 
Www.blueidea.com/tech/site/2006/3170.asp
Www.jluvip.com/blog/article.asp? Id = 114
 

 
High Column skills
 

 
The layout of N rows and n columns is the same as the height of each column (the height of which column cannot be determined beforehand), which is the goal pursued by each designer. The practices include filling the background image and adding JS scripts.
The method is used to hide the overflow part of the container and combine the negative bottom boundary of the column with the positive internal patch.
Background Image filling method:
XHTML:
 

<Div id = "Wrap"> <Div id = "column1"> This is the first column </div> <Div id = "column1"> This is the second column </div> <Div class = "clear"> </div>
 
 
CSS:
 

 
# Wrap {width: 776px; Background: url(bg.gif) Repeat-y 300px ;}# column1 {float: Left; width: 300px ;}# column2 {float: Right; width: 476px ;}. clear {clear: Both ;}
 
 
It means to repeat an image with npx width vertically in an external container and locate the vertical repetition at the staggered positions of the two columns. This visually creates the illusion that the two columns have the same height.
 

 
JS script method:
 

 
Www.blueidea.com/bbs/newsdetail.asp? Id = 2453983
This is basically the principle of the Code. The read height, the judgment height, and the height are equal.
 

 
How to hide the container overflow part and combine the negative bottom boundary of the column with the positive internal patch
 

 
This articleArticleIt's very detailed.
 

 
Www.blueidea.com/tech/web/2006/3210.asp
 

 
And
Www.jluvip.com/blog/article.asp? Id = 151
 

 
Full Screen height layout (narrow 770px widest 1024px classic layout)
 

 
Www.blueidea.com/tech/web/2005/3124.asp