Div + CSS layout technology

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:

The following is a reference clip: <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:

The following is a reference clip: # 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:

The following is a reference clip: <Div id = "Wrap"> <Div id = "column1"> here is the first column </div> <Div id = "column2"> here is the second column </div> </Div>

CSS:

The following is a reference clip: # 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!

2. Examples of common CSS la s

One column
Single Row and one column

The following is a reference clip: Body {margin: 0px; padding: 0px; text-align: center ;} # Content {margin-left: auto; margin-Right: auto; width: 400px ;}

Two rows and one column

 

The following is a reference clip: 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

 

The following is a reference clip: 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

 

The following is a reference clip: # 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

The following is a reference clip: # 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

The following is a reference clip: # 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

 

The following is a reference clip: # Left {position: absolute; top: 0px; left: 0px; width: 120px ;} # Middle {margin: 0px pixel PX 0px pixel PX ;} # Right {position: absolute; top: 0px; Right: 0px; width: 120px ;}

Float positioning
XHTML:

The following is a reference clip: <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> <Div id = "column3"> the third column </div> <Div class = "clear"> </div>/* usage of web standards is not recommended, but remember that the following elements need to be cleared */ </Div>

CSS:

The following is a reference clip: # 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

The following is a reference clip: <Div id = "center" class = "column"> <H1> This is the main content. </Div> <Div id = "Left" class = "column"> <H2> This is the left sidebar. </H2> </Div> <Div id = "right" class = "column"> <H2> This is the right sidebar. </H2> </Div>

CSS

The following is a reference clip: Body { Margin: 0; Padding-left: 200px;/* LC fullwidth */ Padding-Right: pixel PX;/* 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 */ }

Two rows and three columns 

XHTML:

The following is a reference clip: <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> <Div id = "column3"> the third column </div> <Div class = "clear"> </div> </Div>

CSS:

The following is a reference clip: # 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:

The following is a reference clip: <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> <Div id = "column3"> the third column </div> <Div class = "clear"> </div> </Div> <Div id = "footer"> here is the bottom line </div>

CSS:

The following is a reference clip: # 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.

 

The following is a reference clip: Div. Content { Width: 400px; // This is the incorrect width, which is read by all browsers. Voice-family: "/"}/"; // ie5.x/win ignores the content after "/"}/" Voice-family: Inherit; Width: 300px; // Some browsers including IE6/win read this sentence. The new value (300px) overwrites the old one. } HTML> body. Content {// html> body is written in css2. Width: 300px; // the browser that supports CSS 2 (non-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 with important uses the value here Width (Space)/**/: 400px; // IE6/win does not parse this sentence, so 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 flag does not work for them } HTML> body. Content {// html> body is written in css2. Width: 300px; // the browser that supports css2 is lucky enough to read this sentence. }

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:

The following is a reference clip: <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> </Div>

CSS:

The following is a reference clip: # 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.