Day 3, layout of two and three columns

The following content and knowledge points are involved in the layout of two and three columns in "ten days to learn web standards (div + CSS )".

• Two-column adaptive width
• Fixed width of two columns
• Center fixed width of two columns
• Block-level elements (DIV) and inline elements (SPAN) of XHTML)
• Float attributes
• Three-column adaptive width
• Fixed width of three columns
• Fixed width center of three columns
• IE6 3 pixel bug

Adaptive width of one or two columns

The following uses a common left-column fixed right-column adaptive method as an example. Because div is a block element, it occupies space of a row by default. To run the following Div to the right, CSS floating is needed. First, create the HTML code as follows:

<Div id = "side"> the content of ID "side" is displayed here </div>
<Div id = "Main"> the content of ID "Main" is displayed here </div>

Follow the creation method to create both divs or manually write the code. After the DIV is created, create a CSS style table. The Code is as follows:

# Side {Background: #99ff99; Height: 300px; width: 120px; float: Left ;}
# Main {Background: #99 FFFF; Height: 300px; width: 70%; margin-left: 120px ;}

First, create the # Side style. In order to facilitate viewing, set the background color. Note: The side float is set to float left;

Create the # main style. Note that the left margin of # Main is 120px. The preview result is as follows:

When we drag the browser window and change it to an hour, # The width of main will also change. Here, we set margin-left: 120px; just to let out the 120px width occupied by # side. If it is set to 122px, there will be a 2px gap in the middle. You can try it.

 

  Tip: you can modify some code before running it.

 

2. fixed width of two columns

With the above foundation, the fixed width of the two columns is much easier. You only need to change the # Main width from the percentage to the fixed value, for example:

3. fixed width center of two columns

The fixed width center of the two columns needs to be improved based on the fixed width of the two columns. When learning the fixed width of a column, we know how to center it, so here we need to add a parent Div out of the two divs:

<Div id = "content">
<Div id = "side"> the content of ID "side" is displayed here </div>
<Div id = "Main"> the content of ID "Main" is displayed here </div>
</Div>

Operation Method: select the code of the two divs in the source code, click the insert Div button on the toolbar, enter the ID, and then confirm. The code above is obtained.

Next we need to set the # Content style. We know that the # side width is 120px and # The main width is 350px. Then # The content width should be the sum of the two, then set # Content center, so the whole is centered:

 

  Tip: you can modify some code before running it.

 

4. Block-level elements (DIV) and inline elements (SPAN) of XHTML)

Block-level element: a block, like a paragraph, occupies one row by default;

Inline element: it is also called an in-Row Element. As the name suggests, it can only be placed in a row, just like a word. It does not cause line breaks and can play an auxiliary role.

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

From the example, we can see that a block-level element occupies a row by default, which is equivalent to inserting a line break before and after it. The Inline element span does not affect the display effect, as is the case; em only changes the font into italics and does not occupy a single row. This is a block-level element and an inline element. With these elements, our web page becomes rich and colorful.

If no CSS function is available, the block elements are arranged in the order of each row. With CSS, we can change the default layout of HTML and place block elements in the desired position. Instead of just starting another line. That is to say, you can use the display: inline function of CSS to change block-level elements to inline elements, or use the display: Block Function to change inline elements to block elements.

5. Float attributes

Back to our example, we understand block-level elements and inline elements, and it is much easier to understand floating. Float is a key point and I hope everyone can understand it. In the above example, float is used to float the element to the left. In CSS, any element can float. A floating element will generate a block-level box, regardless of its own elements. It must specify a width, otherwise it will be as narrow as possible; in addition, when the available floating space is smaller than the floating element, it will run to the next row until it has enough space to put it down.

I think everyone has used the word layout, which has a text-and-text mixed layout function, such:

This function is very similar to the float in CSS. We will use CSS to implement this function:

<Div id = "side"> </div>
<Div id = "Main"> standard path [www.aa25.cn] provides Div + CSS tutorials, div + CSS video tutorials, Web2.0 standards, div + CSS layout tutorials, and Web page layout instances, CSS layout example, div + CSS template, div + CSS instance parsing, website reconstruction, webpage code, crystal icon, and magic lamp advertisement image. this tutorial is suitable for beginners to learn in a step-by-step manner! </Div>

After the above Code is created, the following result is displayed in the browser preview:

The following uses CSS to float the side and check the effect.

Body {font-size: 18px; line-Height: 200% ;}
# Side {float: Left ;}

Let's see if it is similar to the word, but the text here is very close to the text on the right side of the image. What should I do? As we have already said, when an element floats, You need to specify a width, otherwise it will be as narrow as possible. Set the side width to be greater than the image width, and there should be gaps between them. The width of the image is 192px, and the side is set to 202px. There will be a 10px gap in the middle.

Body {font-size: 18px; line-Height: 200% ;}
# Side {float: Left; width: 202px ;}

Careful friends have found that the # Main DIV in the above example also defines the margin-left: 120px, which is not defined here, but the extra text is uploaded to the image (# side) at the bottom of the page, is it true that after margin-left: is set, it will not run to the # side body? If you can think of this, you are indeed too smart. The fact is, add the following row in the CSS style sheet.

# Main {margin-left: 202px ;}

This is how to apply the floating principle to implement the two-column layout. What about three columns?

6. Adaptive width of three columns

Adaptive width of three columns. Generally, the left and right columns are fixed. The middle columns are adaptive according to the browser width. Next, modify the adaptive width based on the two columns.

<Div id = "side"> the content of ID "side" is displayed here </div>
<Div id = "side1"> the content of ID "side1" is displayed here </div>
<Div id = "Main"> the content of ID "Main" is displayed here </div>

Add the following CSS style:

# Side1 {Background: #99ff99; Height: 300px; width: 120px; float: Right ;}

Remove the width: 70% of the original # main style, and set 120px of the left and right margins to give the width of the left and right columns.

# Main {Background: #99 FFFF; Height: 300px; margin: 0 120px ;}

The preview effect is as follows:

Maybe the preview effect is different from mine. Don't worry. There is another setting. The default body has an outer margin, so we have to set the body's outer margin to 0 here; click the new button on the CSS panel, and then select: Label (redefinition label appearance) in the new panel. Then select the body and set the boundary of the body to 0.

 

  Tip: you can modify some code before running it.

 

Fixed width of three columns

You can add a parent Div based on the three columns of fixed width and set the DIV width. Add a parent container whose ID is content as follows.

Select the three divs in the source code, and click the "insert Div tag" button on the toolbar. The displayed window will display a line break next to the selected content by default, enter the ID as content and define a width for this Div.

The fixed width of the three columns has come out. to center the fixed width of the three columns, you only need to set # Content {margin: 0 auto ;}.

 

  Tip: you can modify some code before running it.

 

8. IE6 3 pixel bug

The 3 pixel bug is a famous bug in IE6. When floating elements are adjacent to non-floating elements, this 3 pixel bug will appear. The CSS code is as follows:

Body {margin: 0 ;}
# Side {float: Left; Background: #99ff99; Height: 300px; width: 120px ;}
# Main {Background: #99 FFFF; Height: 300px ;}

The HTML code is as follows:

<Div id = "side"> the content of ID "side" is displayed here </div>
<Div id = "Main"> the content of ID "Main" is displayed here </div>

Let's take a look at the display effects in IE6 and IE7:

Obviously, IE6 will add a 3px gap between the two divs. To solve this problem, add _ margin-Right:-3px on # side. Remember, add an underline to the front, so that this style takes effect for IE6. IE7 and FF are displayed normally.

Body {margin: 0 ;}
# Side {float: Left; Background: #99ff99; Height: 300px; width: 120px; _ margin-Right:-3px ;}
# Main {Background: #99 FFFF; Height: 300px ;}

Check whether the problem has been solved. However, it cannot pass W3C verification. When the two columns are fixed in width, it is best to set # Main to a fixed width and float to the right, so as to avoid the 3 pixel bug of IE6.