"CSS" about div alignment and page layout

Div layout to learn, because the layout of table is really embarrassing, if it is in a table,

The size distribution of the lines is simply not adjustable,

For example, the following is a very simple code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
I wanted to write a layout like this:
But the effect actually comes out like this:
This is normal, because only the first row in the table layout works for the TD setting, and the TD settings for the remaining lines are covered by the TD settings for the first row.
This is a serious problem, especially when you have a web designer that sets the border property of table to 0, it's hard to think of what's going on.
To solve this problem, if you still use table layout, then you have two methods, one is to make the two lines are not in the same table, and the other is to use the form nested.
But is it too painful to use a new form for each layout? And how does the script number so many tables? How to control?
So the table page layout is too large to use, only for the layout within the row, table in the role of the layout of the div is really much stronger.
But the div layout can also complete the inline layout, just to define the float property in the style, and to complete the inline layout, using the Clear:both in the style to break the line.

The above layer emissions are implemented by the following code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">For some layers, such as the navigation bar fixed on the page header or the end of the page, some of the ad layer outside the system, you need to use the position alignment, the former is fixed the latter is absolute.
In the above code, continue to add the following code:
<div style= "background: #eee; width:15%; height:100px; Position:absolute; top:5%; left:80%; " > free from the system </div><div style= "background: #aaa; width:100%; height:30px; position:fixed; top:0%;left:0% "> free from the system </div><!--below two layers, just to show that the above two lines of code can be placed in any position, but does not affect the layout of the page--><div style=" Background: #aa0; width:15%; height:100px; " ></div><div style= "background: #0a0; width:15%; height:100px; " ></div>
The following effects can occur:

The layers that are position:fixed, even if the scroll bar is pulled down, are always hung on the head:


The two lines of code above about the navigation bar layer and the ad layer can be placed anywhere without affecting the network layout. So, all the code of the Web page evolves as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">So the div layout is much more powerful and controllable and usable than the table layout.
"CSS" about div alignment and page layout