Use DIV+CSS to create a fixed-width layout

css| Create

My recent columns have discussed various aspects of using XHTML and CSS to implement two or three-column page layouts. So far, all examples use a streaming layout (that is, the layout automatically expands and adapts to the width of the browser window). Now it's time to consider another major page layout method, which is a fixed-width layout.

Many Web builders tend to use fixed-width layouts for page design because they produce accurate and predictable results. This approach is very close to the print layout, is an important comfort factor for designers and visitors, and fixed-width layouts are also the best way to deal with content that contains many large pictures and other elements because they do not behave well in a streaming layout.

from Table to the Div

In recent years, designers have used tables (table) to create a fixed-width layout. Table columns and rows are a viable simulation of the designer's layout table (grid), so it's not surprising why designers use HTML tables to complete page layouts.

However, there is an obvious problem with the layout based on the table. In addition to being semantically unsuitable for layout, the resulting code is confusing, difficult to read, and even difficult to maintain-especially when you include merged table cells and nested tables.

It's much better to use DIV for page layout. In addition to this is the best recommended method, the code can be loaded faster and easier to handle.

The format (formatting) property of a table and its cells is borrowed into a fixed-width layout because the size of the specified elements is fairly straightforward. In fact, through the DIV can do the same thing, as long as the precise div to determine the dimensions and use absolute and relative positioning of these div to the page can be positioned.

A fixed-width example

Figure A

Figure A shows a typical fixed-width layout, which consists of a header at the top, a three-column section (the main content column, a toolbar on each side), and a footer at the bottom of the page. The width of all elements is fixed, and their dimensions do not change when the browser window is published.

The following XHTML markup generates the page shown in Figure A. (For the sake of simplicity, the content is truncated.) ）

header

side1

• let me not to the marriage of true minds


• admit impediments; Love are not love


• which alters when it alteration finds


• or bends with the remover to remove


• oh, no, it is an ever fixed mark

main content

that looks on tempests ... his height is taken.

but bears it out ... alteration finds.

whose worth ' s unknown, ... the remover to remove.

side2

• let me not to the marriage of true minds


• admit impediments; Love are not love


• which alters when it alteration finds

footer

or bends with ... height is taken.

The following is a CSS code that designs the page as a fixed-width layout.

Body {
Font-family:verdana, Arial, Helvetica, Sans-serif;
font-size:12px;
margin:0px;
padding:0px;
}
H2,H3 {
margin-top:0px;
padding-top:0px;
}
Div#head {
Position:absolute;
width:750px;
height:100px;
left:0px;
top:0px;
Background-color: #FFFF66;
}
Div#columns {
position:relative;
width:750px;
top:100px;
Background-color: #CCCCCC;
}
Div#side1 {
Position:absolute;
width:150px;
top:0px;
left:0px;
Background-color: #FF6666;
}
div#content {
position:relative;
width:450px;
top:0px;
left:150px;
Background-color: #999999;
}
Div#side2 {
Position:absolute;
width:150px;
top:0px;
left:600px;
Background-color: #00FF66;
}
Div#foot {
position:relative;
width:750px;
Clear:both;
margin-top:100px;
Background-color: #99FFFF;
}

Explode code

This tag is not particularly noteworthy-just outside of each main page element (title, footer, sidebar, and main content) surrounds the Div. Each div has an ID, and the corresponding CSS style can refer to it using this ID. Only an extra div (div id= "columns") surrounds the three-column content area. It is necessary to place the footer below the longest column in the three columns in Internet Explorer.

Like normal usage, CSS code accomplishes all the important tasks. First it completes some housekeeping. The body style sets the margin of the page to zero,H2, and the H3 style sets the default spacing to zero. Otherwise, there will be a margin around the layout, and in some browsers (such as Netscape and Mozilla) The title will create a blank area above the main content and footer.

The style Div#head sets a clear height and width for the title div. Headings are explicitly positioned in the upper-left corner of the page using position:absolute, top:0px , and left:0px rules. Rule Position:absolute are important because positional properties (top, left, right, bottom) are ignored in general (static) positioning. Remember, however, that any element that is absolutely positioned is removed from the regular page stream, and the elements that are part of the page flow are positioned on the page as if an absolutely positioned element does not exist.

The style div#columns controls the format of the div so that it acts as a container for three columns. It uses position:relative to create an element that is part of a regular page stream (it expands and adapts to its content, thus affecting the positioning of other elements), but it will offset from its general position. The rule top:100px provides an offset that pushes the column container down to cover the title.

Rule Div#side1 controls the style of the first toolbar column. It sets the width of the column (width:150px) and uses absolute positioning to place the column in the upper-left corner of its parent element. The parent element is the DIV for that column, and if the element uses relative positioning against the BODY element, it interprets the top:0px rule rather than the 100px setting you expect. The rule div#side2 sets the columns used by the left toolbar in the same way. The only difference between div#side1 and div#side2 is the background color and the left:600px rule, which locates the column to the right of the other two columns.

The style control for the main content in the style div#content is similar to the style control of the other two columns. It explicitly designs the width (width:450px) and uses the left:150px and top:0px rules to locate the column within its parent element (the div that surrounds the three columns). The main difference is the position:relative rule. We use relative positioning to make the main content column affect the size of its parent element (the div that surrounds the three columns) and thus affect the size of the footer element.

Style Div#foot sets the width of the footer (width:750px), which also contains a clear:both rule that guarantees that it is connected under other elements, not next. Because it uses relative positioning, its position on the page is determined by the flow of other elements, which are specifically determined by the DIV enclosing the three columns. Rule margin-top:100px is an important detail that prevents the footer from being overwritten by the column above. These columns are offset from their regular positions in the page flow to make room for the absolutely positioned title and the footer that needs to be offset.

Change of center style

The most common and major change in a fixed-width page layout may be that a fixed-width piece of content floats in the middle of a browser window rather than glued to the left side of the browser window. You can easily achieve this by adding a wrapper (wrapper) div around the rest of the tag (that is, inside the body tag) and creating a CSS style to center the Div.

Figure B

For example, figure B is the result of adding a label (

) and a corresponding CSS style on the basis of figure A. The following is the code for the newly added CSS style:

Div#wrapper {
position:relative;
Margin-left:auto;
Margin-right:auto;
top:20px;
width:750px;
Background-color: #CCCCCC;
}

This method works because all the layout div are relative to their parent element. In Figure A, the parent element of the Div with the title, content column, and footer is the body tag, but in Figure B, their parent element is the wrapper div. This centering method is explained in detail in the article "Creating a centered page layout with CSS (creating a centered page layout using CSS)".