The common methods and examples of CSS layout and some problems

css| problem

1.CSS Layout Common methods:
Float:none | Left | Right

Take value:
None:  default value. object does not float
Left:  text flows to the right of the object
Right:  text flows to the left of the object

How does it work, look at a row and two columns of examples

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

Take value:

Static: default value. No special location, objects follow HTML positioning rules
Absolute:  Drag objects out of the document stream, using the left, right, top, and bottom attributes to be absolutely positioned relative to their nearest parent object with the most location setting. If no such parent object exists, it is based on the body object. And its cascade is defined by the Z-index property
Fixed:  not supported. Object positioning conforms to an absolute (absolute) approach. But there are some rules to follow.
Relative:  objects cannot be stacked, but will be offset from the normal document flow based on the properties of left, right, top, bottom, etc.

It to implement an example of a 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 positioning */width:770px;}
#column1 {position:absolute; top:0; left:0; width:300px;}
#column2 {position:absolute; top:0; right:0; width:470px;}

What is the difference between them?

Obviously, float is relative positioning, will change with the browser size and resolution changes, and position is not, so generally or float layout!

2.CSS Common Layout instances

A column
Single Row 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 two columns

#bodycenter {width:700px;margin-right:auto; margin-left:auto;overflow:auto; }
#bodycenter #dv1 {float:left;width:280px;}
#bodycenter #dv2 {float:right;width:410px;}

Two rows, 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:410px;}

Three rows, 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:410px;}
#footer {width:700px; Margin-right:auto;  Margin-left:auto;  Overflow:auto; }

Three columns
Single row three columns
Absolute positioning

#left {position:absolute; top:0px; left:0px;  width:120px; }
#middle {margin:20px 190px 20px 190px;}
#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" > This is 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 positioning two

Xhtml:

<div id= "center" class= "column" >
</div>
<div id= "left" class= "column" >
</div>
<div id= "Right" class= "column" >
</div>

Css:

body {margin:0;padding-left:200px;padding-right:190px;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, 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" > This is 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, 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" > This is 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: Here is a list of commonly used examples, rather than the use of research, for a single box, I have not set margin,padding,boeder and other attributes, because I personally feel that with the width of the positioning, it is best not to use them, unless the Birburd, because if not so, Solve the browser compatibility problem, will make you headache, and produce a series of CSS code, I think this efficiency and effect are not good!

3.CSS Layout Advanced Techniques

Margin and padding are always likely to be used, and the problems that arise are solved? Because the browser interprets the container width in different ways:

IE 6.0 Firefox Opera etc is
True width =width+padding+border+margin
IE5. X
True width =width-padding-border-margin

Obviously, the first kind of perfect layout in the second case the consequences are very miserable!

The solution is hack .

div.content {
width:400px; This is the wrong width, all browsers have read
voice-family: "}\" "; IE5. X/win ignores the contents of "\"}\ ""
Voice-family:inherit;
width:300px; Some browsers, including Ie6/win, read the phrase, and the new value (300px) overwrites the old
}
Html>body. Content {//html>body is CSS2 's writing
width:300px; Browsers that support CSS2 (non-IE5) have the honor to read this sentence
}

div.content {
width:300px!important; This is the correct width, most browsers that support!important tags use the values here
Width (space)/**/:400px; Ie6/win does not parse this sentence, so Ie6/win still think the value of width is 300px, and Ie5.x/win reads this, the new value (400px) covers the old, because the!important tag doesn't work for them.
}
Html>body. Content {//html>body is CSS2 's writing
width:300px; The browser that supports CSS2 this writing is fortunate to have read this sentence
}

Click the link below to view the details

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

Column and other high skills

n row n column layout, each column height (cannot determine which column height in advance) is the same, is each designer pursues the goal, the practice has: the background picture fills, adds the JS script the
Methods are combined with the container overflow part hiding and the negative bottom boundary of the column and the positive inner patches.

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

is a picture of a npx wide in the external container longitudinal repeat, positioning to two columns staggered position longitudinal Repeat, visually generated two columns of the same height illusion

JS Scripting Method:

www.blueidea.com/bbs/NewsDetail.asp?id=2453983
The basic principle of code is this, read height, judge height, height equal.

A method of combining the container overflow part hiding and the negative bottom boundary of the column and the positive inner patch

This article is very detailed:

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

And also:

www.jluvip.com/blog/article.asp?id=151

Mansi Height layout (narrowest 770px widest 1024px classic layout)

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

Today and a netizen two days, he mentioned: to a foreign company to do a website, request 1.800x600 full screen. 2.1024x767 full screen. 3.1280 centers below. 4. Don't use JS.
I suddenly thought of this article, haha! The thing that feels incredible is solved! But there seems to be something wrong with IE5!