Div + CSS layout

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 = "warp">
<Div id = "column1"> here is the first column </div>
<Div id = "column2"> here is the second column </div>
<Div class = "clear"> </div>
</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 = "warp">
<Div id = "column1"> here is the first column </div>
<Div id = "column2"> here is the second column </div>
</Div>

CSS:

# 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

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

Two 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-end {margin-left: auto; margin-Right: auto; width: 400px; width: 370px ;}

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; width: 370px ;}
# Content-end {margin-left: auto; margin-Right: auto; width: 400px; width: 370px ;}

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

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

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: pixel ;}
# Footer {width: 700px; margin-Right: auto; margin-left: auto; overflow: auto ;}

Three columns
Single Row and three columns
Absolute Positioning

# Left {position: absolute; top: 0px; left: 0px; width: 120px ;}
# Middle {margin: 20px pixel PX 20px pixel PX ;}
# Right {position: absolute; top: 0px; Right: 0px; width: 120px ;}

Float positioning

XHTML:

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

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

Body {margin: 0; padding-left: 200px; padding-Right: pixel PX; Min-width: 240px ;}
. Column {position: relative; float: Left ;}
# Center {width: 100% ;}
# Left {width: 180px; Right: 240px; margin-left:-100% ;}
# Right {width: 130px; margin-Right:-100% ;}

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>
<Div id = "column3"> the third column </div>
<Div class = "clear"> </div>
</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 = "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>
<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

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, 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.
}

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>
</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, judgment height, and 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 article describes in detail:

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

Also:

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

Today, I spoke to a netizen for two days. He mentioned that a website for a foreign company requires a full screen of 1.800x600. 2.1024x767 full screen. 3.1280 center. 4. JS is not allowed.
I suddenly remembered this article, haha! Solve what it feels incredible! However, it seems that there is something wrong with ie5!