Day 10: Adaptive height

If we want to add a line foot footage in the 3-column layout, place the copyright. I have encountered problems that must be aligned with the bottom of the 3 column. In the Table layout, we can use a large form of nested small forms. It can be very convenient to three columns; and use the DIV layout, three columns are independently dispersed, and it is difficult to align. In fact, we can completely nested DIV, put the three columns into a DIV, and do the bottom alignment. Here is an implementation example (white background box simulation one page):

Body

Here is #HEADER {margin: 0px; border: 0px; Background: # ccd2de; width: 580px; height: 60px;}

Here is #mainbox {margin: 0px; width: 580px; Background: #fff;} Contains # Menu, # Sidebar and #Content

Here is #menu {float: right; margin: 2px 0px 2px 0px; padding: 0px 0px 0px 0px; width: 400px; Background: # ccd2de;}

Here is #SIDEBAR {FLOAT: LEFT; Margin: 2px 2px 0px 0px; padding: 0px; Background: # f2f3f7; width: 170px;}, background color with # main background color

Here is #content {float: right; margin: 1px 0px 2px 0px; padding: 0px; width: 400px; background: # e0efde;}

Here is the main content, according to the content automatic adaptation height

Here is the main content, according to the content automatic adaptation height

Here is the main content, according to the content automatic adaptation height

Here is #footer {clear: Both; Margin: 0px 0px 0px 0px; padding: 5px 0px 5px 0px; Background: # ccd2de; height: 40px; width: 580px;}.

The main code of this example is as follows: