If we want to add a footer line at the end of the 3-column layout to put information such as copyright. I encountered the problem of having to align the bottom of 3 columns. In the table layout, we use the method of nesting large tables into small tables, which can easily align the three columns; with the div layout, the three columns are scattered independently and the content is of different heights, making it difficult to align. In fact, we can completely nest divs and put three columns into one DIV to achieve bottom alignment. The following is an implementation example (a white background box simulates a page):
Body
The main code of this example page is as follows:
<div id="header"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
The specific style sheets are written in the corresponding sections. The key point is that the #mainbox layer is nested in three layers: #menu, #sidebar and #content. When the content of #content increases, the height of #content will increase, and the height of #mainbox will also expand, and the #footer layer will automatically move down. This achieves a high degree of adaptability.
It is also worth noting that #menu and #content are floating on the right side of the page "FLOAT: right;", #sidebar is floating on the left side of the #menu layer "FLOAT: left;", this is the floating method positioning, and you can also use Absolute positioning is used to achieve this effect.
Another problem with this method is that the background of the sidebar #sidebar cannot be 100%. The general solution is to fill it with the body's background color. (The background color of #mainbox cannot be used because the background color of #mainbox is invalid in browsers such as Mozilla.)
Okay, the main framework has been built, the remaining work is just to add bricks and tiles to it. If you want to try other layouts, I recommend reading the following articles:
16 examples of CSS layout
onestab: three-column composite layout demonstration
onestab: freely stretchable three-column layout
