The common methods and examples of CSS layout and some problems

Source: Internet
Author: User
Tags header relative
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!




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.