If you use the table design method, it is usually a three-row layout with upper, middle and lower rows. 
. If using DIV, I consider using three columns for layout, like this 
.
2. Define body style
First define the style of the body of the entire page. The code is as follows:
body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }
The function of the above code was explained in detail in the previous day's tutorial, and everyone should understand it at a glance. The border margin is defined as 0; the background color is #FEFEFE, the background image is bg_logo.gif, and the image is located in the lower right corner of the page, without repetition; the font size is defined as 12px; the font color is #666; the line height is 150%.
3. Define the main div
The first time I used CSS layout, I decided to use a fixed-width three-column layout (which is simpler than the adaptive resolution design, hoho, don’t say I’m lazy, implement a simple one first to gain some confidence!). Define the width of the left, middle and right to be 200:300:280 respectively, defined as follows in CSS:
/*Define the left column style of the page*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*Define column styles on the page*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*Define the right column style of the page*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }
Note: I used POSITION: absolute; when defining the middle column and right column divs, and then defined LEFT:200px;TOP:0px; and LEFT:500px;TOP:0px; respectively. This is the key to this layout. I used the layer absolute positioning. Define the middle column to be 200px from the left border of the page and 0px from the top; define the right column to be 500px from the left border of the page and 0px from the top;.
At this time, the code of the entire page is:
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
<head>
<title>Welcome to the new "Web Designer": web standard tutorials and promotion</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿杰" />
<meta name="Copyright" content=" www.w3cn.org , free copyright, any reproduction" />
<meta name="description" content="New web designer, web standards tutorial site, promotes the application of web standards in China." />
<meta content="web standards, tutorials, web, standards, xhtml, css, usability, accessibility" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href=" http://www.w3cn.org/favicon.ico " type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</head>
<body>
<div id="left">Left column of page</div>
<div id="middle">Page middle column</div>
<div id="right">Right column of page</div>
</body>
</html>
At this time, the page effect can only see three juxtaposed gray rectangles and a background image. But I want the height to be full screen, what should I do?
4.100% adaptive height?
In order to keep the three columns at the same height, I tried setting "height:100%;" in #left, #middle and #right, but found that there was no expected adaptive height effect at all. After some attempts, I had to give each div an absolute height: "height:1000px;", and as the content increased, I needed to constantly correct this value. Is there no way to adjust the height? As Ajie's own study deepened, he discovered a flexible solution. In fact, there is no need to set 100% at all. We have been too deeply imprisoned by table thinking. This method will be introduced in detail in the next section of study.