Use XHTML and CSS to implement the layout of two or three columns of pages. So far, all examples use streaming layout (that is, the layout will automatically expand and adapt to the width of the browser window ). Now it is time to consider another major page layout method, which is a fixed-width layout.
Many Web builders tend to use a fixed-width layout for page design because they can generate accurate and predictable results. This method is very similar to the print layout and is a very comfortable factor for designers and visitors. In addition, for content that contains many large images and other elements, since they do not work well in stream la S, fixed-width la s are also the best way to deal with such content.
From table to Div
In recent years, designers have used tables to create a fixed-width layout. The columns and rows of a table are a feasible simulation of the designer's layout table (GRID), so it is not surprising why the designer uses an HTML table to complete the page layout.
However, there is an obvious problem with table-based layout. In addition to semantic discomfort in table layout, the generated code is also confusing, difficult to read, or even difficult to maintain-especially in cells containing the merged table) and nested tables.
Using Div for page layout is much better. In addition to the recommended best method, code loading is faster and easier to handle.
The formatting attribute of the table and its cells is borrowed from the fixed-width layout because it is quite easy to specify the size of these elements. In fact, the DIV can do the same thing, as long as you determine the precise dimension of the DIV and use absolute and relative positioning to locate these Div to the page.
A typical fixed-width layout consists of a title on the top and a three-column content area (a toolbar on each side of the main content column ), and a footer at the bottom of the page. The width of all elements is fixed; their size does not change when the browser window is released.
The following is the XHTML code.
<Body>
<Div id = "head">
<H1> header </Div>
<Div id = "columns">
<Div id = "side1">
<H3> side1 <Ul>
<Li> Let me not to the marriage of true minds </LI>
<Li> admit impediments; love is not love </LI>
<Li> which alters when it alteration finds </LI>
<Li> or bends with the remover to remove </LI>
<Li> oh, no, it is an ever fixed mark </LI>
</Ul>
</Div>
<Div id = "content">
<H2> main content </H2>
<P> That looks on tempests... his height be taken. </P>
<P> but bears it out... alteration finds. </P>
<P> whose worth's unknown,... the remover to remove. </P>
</Div>
<Div id = "side2">
<H3> side2 <Ul>
<Li> Let me not to the marriage of true minds </LI>
<Li> admit impediments; love is not love </LI>
<Li> which alters when it alteration finds </LI>
</Ul>
</Div>
</Div>
<Div id = "foot">
<H3> footer <P> or bends with... height be taken. </P>
</Div>
</Body>
The following is the 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: pixel PX;
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: #99 FFFF;
}
Code Decomposition
This mark is not particularly worth noting-it is only surrounded by a div outside each main page element (title, footer, toolbar, and main content. Each Div has an ID, which can be referenced by the corresponding CSS style. Only one extra Div (div id = "columns") is surrounded by three columns of content. It is necessary to put the footer in the longest column of the three columns in Internet Explorer.
As usual, CSS code completes all important tasks. First, it completes some housework management. The body style sets the margin of the page to zero, while the H2 and H3 styles set 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 generate a blank area above the main content and footer.
Style Div # head sets a clear height and width for the title Div. The title uses the position: absolute, top: 0px, and left: 0px rules to explicitly locate in the upper left corner of the page. Rule position: absolute is very important because positioning attributes (top, left, right, and bottom) are ignored during regular (static) positioning. However, remember that any absolutely positioned element will be removed from the regular page stream, and the element that belongs to the page stream will be located on the page like the absolute positioning element does not exist.
Style Div # columns controls the DIV format to act as a container for three columns. It uses position: relative to create an element of the regular page stream (it will expand and adapt according to its content, thus affecting the positioning of other elements ), but it will be offset from its regular position. Rule top: 100px provides an offset to push down the column container so that it overwrites the title.
Rule Div # side1 controls the style of the first toolbar column. It sets the width (width: 150px) of the column and uses absolute positioning to place the column in the upper left corner of its parent element. The parent element is the DIV of the column. If this element uses relative positioning relative to the body element, it will explain the top: 0px rule rather than the expected 100px setting. 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 left: 600px rule. The latter positions the column on the right of the other two columns.
Style Div # The style control of the main content column in the content is similar to that of the other two columns. It explicitly designs the width (width: pixel px) and uses the left: 150px and top: 0px rules to locate the column in its parent element (div surrounded by three columns. The main difference is the position: relative rule. We use relative positioning so that the primary content column can affect the size of its parent element (div surrounded by three columns) and thus the size of the footer element.
Style Div # foot sets the width (width: 750px) of the footer. The style also contains a clear: both rule, which ensures that it is connected to other elements rather than the side. Because it uses relative positioning, its position on the page is determined by the stream of other elements. Here it is determined by the DIV surrounded by three columns. The rule margin-top: 100px is a very important detail, which prevents the footer from being overwritten by the above columns. These columns are offset from their regular positions in the page stream to free up spaces for the absolute positioning title and the footer that requires the corresponding offset.
A label (<Div id = "wrapper">) and a corresponding CSS style are added. The code for the newly added CSS style is as follows:
Div # wrapper {
Position: relative;
Margin-left: auto;
Margin-Right: auto;
Top: 20px;
Width: 750px;
Background-color: # cccccc;
}
This method can be used because all layout divs are positioned relative to their parent element.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
