If we want the end of the 3 column layout plus line footer, put the copyright of such information. 3 must be aligned to meet the bottom of the problem. In the table layout, we use a small table big way nested table, you can easily align the three; but with div layout, three independent dispersion, high and low content, it is difficult alignment. In fact, we can nested div, the three into a DIV in to do the bottom of the alignment. Here is the example (box to simulate a white background page):
Example Source Code [www.hutshow.com]
<html>
<head>
<style type=”text/css”>
# Body, div {FONT-SIZE: 12px;}
# Pagebox {
margin: 0px;
PADDING: 20px;
BACKGROUND: # FFF;
FONT-FAMILY: arial, ‘Arial’, ‘Times New Roman’, verdana, sans-serif;
WIDTH: 600px;
}
# Header {
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: # ccd2de;
WIDTH: 580px;
HEIGHT: 60px;}
# Mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: # FFF;
}
# Menu {
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING: 0px 0px 0px 0px;
WIDTH: 400px;
BACKGROUND: # ccd2de;
}
# Content {
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING: 0px;
WIDTH: 400px;
BACKGROUND: # E0EFDE;}
# Sidebar {
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
BACKGROUND: # F2F3F7;
WIDTH: 170px;
}
# Footer {
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: # ccd2de;
HEIGHT: 40px;
WIDTH: 580px;
}
</ Style>
</ Head>
<body>
<div id=”header”> here is # header {
MARGIN: 0px;
BORDER: 0px;
BACKGROUND: # ccd2de;
WIDTH: 580px;
HEIGHT: 60px;} </ div>
<div id=”mainbox”>
Here is the # mainbox {
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: # FFF;
} Contains the # menu, # sidebar and # content
<div id=”menu”> here is # menu {
FLOAT: right;
MARGIN: 2px 0px 2px 0px;
PADDING: 0px 0px 0px 0px;
WIDTH: 400px;
BACKGROUND: # ccd2de;
} </ Div>
<div id=”sidebar”> <p> here is # sidebar {
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
BACKGROUND: # F2F3F7;
WIDTH: 170px;
}, The background color with the # main background color </ p> </ div>
<div id=”content”> <p> here is # content {
FLOAT: right;
MARGIN: 1px 0px 2px 0px;
PADDING: 0px;
WIDTH: 400px;
BACKGROUND: # E0EFDE;} </ p>
<p> This is the main content, based on the content automatically adapt to the height </ p> <p> This is the main content, based on the content automatically adapt to the height </ p>
<p> This is the main content, based on the content automatically adapt to the height </ p>
</ Div>
</ Div>
<div id=”footer”> here is # footer {
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
BACKGROUND: # ccd2de;
HEIGHT: 40px;
WIDTH: 580px;
}. </ Div>
</ Div>
</ Body>
</ Html>
The main page of this example code is as follows:
Example Source Code [www.hutshow.com]
<div id=”header”> </ div>
<div id=”mainbox”>
<div id=”menu”> </ div>
<div id=”sidebar”> </ div>
<div id=”content”> </ div>
</ Div>
<div id=”footer”> </ div>
Specific style sheets are written in the appropriate forum in the. Focus # mainbox layer nested # menu, # sidebar and # content of three layers. When increasing the content # content, # content’s height will be increased, while the height of # mainbox distraction, # footer layer is automatically down. This achieved a high degree of adaptation.
Also of note is: # menu and # content is floating on the page right “FLOAT: right;”, # sidebar is a floating layer in the # menu to the left of “FLOAT: left;”, which is positioning the floating method can also be used absolute positioning to achieve such results.
This approach has another problem which is the background of sidebar # sidebar can not be one hundred percent. General solution is to use the body to fill the background color. (Can not use # mainbox the background color, because the Mozilla browser, such as the background color # mainbox failure.)
Well, the main framework has been set up is completed, the remaining work is entered, and building blocks.
===============================================================Related posts:
- the minimum height (min-height) of the Magical BOX minimum height can be set to a minimum height,...
- Commonly used methods and techniques CSS layout of the commonly used method float: none |...
- Three rows and three column of highly adaptive DIV layout Three rows and three column of highly adaptive DIV layout...
- HTML page layout structure of the DIV CSS Getting Started Guide You are learning CSS layout? Is not fully grasp the...
- The eleventh day : the menu without table Build up the initial layout, I began to fill the...
Related posts brought to you by Yet Another Related Posts Plugin.
