I have been learning about Div + CSS layout during this period of time. I feel that this section is quite practical,
Original layout by Owen Briggs
Single Row Single Column
- Single Row Single Column 1: Float float floating in the upper left corner, fixed width.
- Single Row Single Column 2: fixed in the upper left corner, fixed width, using absolute (absolute) positioning.
- Single Row Single Column 3: fixed in the upper left corner, not fixed width, using percentage (%) to define the width from Adaptive Page.
- Single Row, single column, 4 (recommended): fixed width. The center attribute (text-align: center;) is defined in the body style to automatically center the page.
Single Row and two columns
- Single Row and two columns 1: both columns have fixed width. The first column floated in the upper left corner, and the second column floated to the right of the first column.
- Single Row and two columns 2: both columns are in percentage width, but not full screen. The first column is fixed in the upper left corner, and the second column is floating on the right of the first column.
- Single Row and two columns 3: percentage width of both columns, full screen. Both columns adopt absolute positioning.
- Single Row and two columns 4: Percentage width of both columns, full screen. The first column floats in the upper left corner, and the second column floats in the upper right corner.
- Single Row and two columns 5: The percentage width of both columns, full screen. The first column floated in the upper left corner, and the second column floated to the right of the first column.
Single Row and three columns
- Single Row, three columns 1: The left and right columns are absolutely positioned (the right column is located on the top right ). The left and right columns are fixed in width and the middle columns are adaptive to the page.
- Row 3 Column 2: the left column is located on the top left, the right column is located on the top right, and the middle column is located on the right of the left column. The left and right columns are fixed in width and the middle columns are adaptive to the page.
- Single Row, three columns, and three columns are absolutely positioned. The left and right columns are fixed in width, and the middle columns are adaptive to the content.
- Single Row, three columns, 4 (recommended): similar to style 2, only the margin: 20px attribute is added to the body style, solving the problem of top-down of the intermediate column in netscape6.0.
- Single Row, three columns, and five columns: The left and right columns are absolutely positioned, and the middle columns are adaptive. Width full screen.
Top row and three columns
- Top row, three columns, 1 (recommended): Top row, Adaptive Page width. Absolute positioning of left and right columns, Adaptive Page of middle columns.
- Top row, three columns, 2: Full Screen
