Web Standards (review)-32 and three-column layouts

Learning two and three-column layouts today will involve the following and knowledge points

Two-Column adaptive width
Fixed width of two columns
Two-column fixed-width centering
Block-level elements (div) and inline elements (span) for XHTML
Float Property
Three-column adaptive width
Three-column fixed width
Three-column fixed-width centering
IE6 3-pixel bug

Adaptive width of one or two columns
The following is a common left column fixed right column adaptive as an example, because Div is a block element, by default occupy a row of space, to let the following div to the right, you need to help CSS floating to achieve. First create the HTML code as follows:

<style>
#side {background-color: #99FF99; height:300px; width:120px; float:left;}
#main2 {background: #99FFFF; height:300px; width:70%; margin-left:120px;}
</style>
<div id= "Side" > here to show the contents of the id "side" </div>
<div id= "Main2" > here to show the contents of id "main" </div>)

Fixed width of two columns
With the previous foundation, the fixed width of the two columns is much easier, just to change the width of the #main from a percentage to a fixed value, such as:

<style>
#side3 {background-color: #99FF99; height:300px; width:120px; float:left;}
#main3 {background: #99FFFF; height:300px; width:400px; margin-left:120px;}
</style>
<div id= "Side3" > here to show the contents of the ID "side"--Fixed </div>
<div id= "Main3" > here to show the contents of ID "main"--fixed </div>)

Three, two columns fixed width center
The fixed width of the two columns is centered and needs to be improved on the basis of a fixed width of two columns, and we know the way to center it when learning a fixed width of a column, so here we need to add a parent div to the two div:

<style>
#side3 {background-color: #99FF99; height:300px; width:120px; float:left;}
#main3 {background: #99FFFF; height:300px; width:400px; margin-left:120px;}
#content {width:470px; margin:0 auto;}
</style>
<div id= ' content ' >
<div id= "Side3" > here to show the contents of the ID "side"--Fixed </div>
<div id= "Main3" > here to show the contents of ID "main"--fixed </div>
</div>

Iv. block-level element (div) and inline elements (span) for XHTML
Block-level elements: is a block, like a paragraph, the default occupies a line appears;

Inline elements: Also called inline elements, as the name implies, can only be placed in the line, like a word, will not cause before and after the line, play an auxiliary role.

General block-level elements such as paragraph <p>, title

The block-level element occupies a row by default, which is equivalent to inserting a newline before and after it, while inline element span does not have any effect on the display effect, as is the case; em just makes the font italic and does not occupy a single line. This is a block-level element and an inline element, and just because of these elements makes our web pages colorful.

If there is no CSS, the block elements are ordered to go down in a row each time. With CSS, we can change the default layout of this HTML and put the block elements where you want them. Instead of every stupid other line. In other words, you can use CSS Display:inline to change block-level elements to inline elements, or you can use Display:block to change inline elements to block elements.

Five, float property
Back in our example, understanding the block-level elements and inline elements makes it much easier to understand floats. Float is a key point and I hope everyone can understand it. In the example above, float is used to float the element to the left, and any element can float in the CSS. A floating element generates a block-level box, regardless of its own element, and it is as narrow as possible if it is a width, and when the space available to float is smaller than the floating element, it runs to the next line until it has enough space to put it down.

Six or three-column adaptive width
The three-column adaptive width, the commonly used structure is the left column and the right column fixed, the middle column according to the browser width adaptive. The following changes are based on the two-column adaptive width

<style>
#side4 {background-color: #99FF99; height:300px; width:120px; float:left;}
#side41 {background-color: #99FF99; height:300px; width:120px; float:right;}
#main4 {background: #99FFFF; height:300px; margin:0 100px; }
</style>
<div id= "Side4" > here to show the contents of the id "side" </div>
<div id= "Side41" > here to show the contents of the id "side1" </div>
<div id= "Main4" > here shows the contents of id "main" </div>

Seven or three column fixed width
Three-column fixed width you can add a parent div on a three-column adaptive basis and set the width of the Div, as follows, adding a parent container with the ID content.

Select the three div in the source code and click on the "Insert div tag" button on the toolbar, then the popup window insert will default to: Wrap the selected content, enter the ID as content, then define a width for the div

<style>
#side4 {background-color: #99FF99; height:300px; width:120px; float:left;}
#side41 {background-color: #99FF99; height:300px; width:120px; float:right;}
#main4 {background: #99FFFF; height:300px; margin:0 100px; }
#content2 {margin:0 auto; width:500px}
</style>
<div id= ' Content2 ' >
<div id= "Side4" > here to show the contents of the id "side" </div>
<div id= "Side41" > here to show the contents of the id "side1" </div>
<div id= "Main4" > here shows the contents of id "main" </div>
</div>

Viii. 3 pixel bug in IE6
3 MP Bug is a well-known bug in IE6, and this 3-pixel bug appears when floating elements are adjacent to non-floating elements. Look at this example of the left column fixed, right column liquid, CSS code is as follows:

body {margin:0;}
#side {float:left; background: #99FF99; height:300px; width:120px;}
#main {background: #99FFFF; height:300px;}

The HTML code is as follows:

<div id= "Side" > here to show the contents of the id "side" </div>
<div id= "Main" > here shows the contents of id "main" </div>

IE6 will be in the middle of the two Div with 3px Gap, then to solve this problem, please add _margin-right:-3px on the #side, remember, the front with a dash, so this style is specifically for the IE6 effective. The IE7 and FF will also display normally.

body {margin:0;}
#side {float:left; background: #99FF99; height:300px; width:120px; _margin-right:-3px;}
#main {background: #99FFFF; height:300px;}

But it cannot be verified by the use of the consortium. When the two columns are fixed width, it is best to keep the #main fixed width and float to the right so that the IE6 3 pixel bug can be avoided.