Very good CSS Basic Layout 16 Examples _ Basic tutorial

Single row

Single row 1: float floating in the upper left corner, fixed width.

#content {float:left; padding:10px; margin:20px; background: #FFF; border:5px solid #666; width:400px;/* Ie5win FUD GE begins */voice-family: "\ \"}\\ ""; Voice-family:inherit; width:370px; }html>body #content {width:370px;/* Ie5win fudge ends */}

Single row 2: Fixed in upper left corner, fixed width, with absolute (absolute) positioning.

#content {position:absolute; top:0px; left:0px; padding:10px; margin:20px; background: #FFF; border:5px solid #666; width:400px; /* Ie5win Fudge begins */voice-family: "\ \"}\\ ""; Voice-family:inherit; width:370px; }html>body #content {width:370px;/* Ie5win fudge ends */}

Single-line 3: Fixed in upper left corner, not fixed width, with percent (%) defined width from fit page.

Single-line single-column 4 (recommended): Fixed width, using the body style to define the center property (text-align:center;) to adapt to the automatic page center.

Single row two columns

Single-row Two-column 1: Both columns have a fixed width. The first column floats in the upper-left corner and the second column floats to the right of the first column.

Single-row Two-column 2: Both columns are percent width, but are dissatisfied with the screen. The first column is fixed in the upper-left corner and the second column floats to the right of the first column.

Single-row Two-column 3: Two columns are percent width, full screen. Absolute positioning is used for both columns.

Single-row Two-column 4: Two columns are percent width, full screen. The first column floats in the upper-left corner and the second column floats in the upper-right corner.

Single-row Two-column 5: Two columns are percent width, full screen. The first column floats in the upper-left corner and the second column floats to the right of the first column.

Single row three columns

One-line three-column 1: The left and right columns are absolutely positioned (top right). Left column and right column fixed width, middle column adaptive page.

Single row three column 2: left column positioned on top left, right column positioned on top right, middle column floating on left column. Left column and right column fixed width, middle column adaptive page.

Single row three column 3: Three columns are absolutely positioned. The left column and right columns are fixed widths, and the middle columns are self-adapting according to the content.

One-line three-column 4 (recommended): Similar to style 2, just add the margin:20px property in the body style, fixed the middle column in the Netscape6.0 of the issue.

Single row three column 5: Left and right column absolute positioning, middle column adaptive. Width Full screen.

Top row three columns

Top row three column 1 (recommended): Top row Adaptive page width. Left and right column absolute positioning, middle column adaptive page.

• Top row Three column 2: Width full screen

