Head First With Html

两列布局

方法一float

The first thing to remember is that the sidebar is floating on the page. The main content area extends all the way under it.

So, what if we give the main content area a right margin that is at least as big as the sidebar? Then its content will extend almost to the sidebar, but not all the way

 #main {
    background: #efe5d0 url(images/background.gif) top left;
    font-size: 105%;
    padding: 15px;
    margin: 10px;
    margin: 0px 330px We're changing the right margin to 330
    pixels to match the size of the sidebar. 10px 10px;
    }

#sidebar {
        background: #efe5d0 url(images/background.gif) bottom right;
        font-size:  105%;
        padding:    15px;
        margin:     0px 10px 10px 10px;
        width:      280px;
        float:      right;
You'll find everything you need to compute the width
of the sidebar in this rule.
}
If you resize the browser to a wide position, the footer comes up underneath the sidebar. 

Why?Well, remember, the sidebar is not in the flow, so the footer pretty much ignores it, 

and when the content area is too short, the footer moves right up.

#allcontent {
        width: 800px;
Rather than having fixed left and right
margins on the "allcontent" <div>, we're
setting the margins to "auto".
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: #675c47;
        margin-left: auto;
        margin-right: auto;
If you remember, when we talked about giving a content
area a width of "auto", the
browser expanded the content area as much as it needed to. With "auto" margins,
the browser figures out what the correct margins are, but also makes sure the left
and right margins are the same, so that the content is centered.
}

You can set this property on an element to request that as the element is being flowed 

onto the page, no floating content is allowed to be on the left, right, or both sides of the

 element. Let's give it a try...

#footer {
        background-color: #675c47;
        color:            #efe5d0;
        text-align:       center;
        padding:          15px;
        margin:           10px;
        font-size:        90%;
Here we're adding a property to the footer rule, which says that
no floating content is allowed on the right of the footer.
        clear:            right;
}

方法二absolute position

When an element is absolutely positioned, the first thing the browser does is remove it 

completely from the flow.This is a little different from floating an element, because 

elements that were in the flow adjusted their inline content to respect the boundaries of 

the floated element.

With fixed positioning, you specify the position of an element just like you do with 

absolute positioning, but the position is an offset from the edge of the browser's window 

rather than the page. The interesting effect this has is that once you've placed content with

 fixed positioning, it stays right where you put it, and doesn't move, even if you scroll the 

page.

#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 330px 10px 10px;
}We're going to give the sidebar some space to be positioned
over by giving the main <div> a big margin. This is really the same
technique we used with the float. The only difference is the way the
sidebar <div> is being placed over the margin.
#sidebar {
    background: #efe5d0 url(images/background.gif) bottom right;
    font-size: 105%;
    padding: 15px;
    margin: 0px 10px 10px 10px;
    position: absolute;
    top: 128px;
    right: 0px; Okay, now we're going to specify that the sidebar is absolutely
positioned 128 pixels from the top, and 0 pixels from the right
of the page. We also want the sidebar to have a width, so let's
make it the same as the float version: 280 pixels.
You'll see where
the "128" came from in a sec...
0 pixels from the right will make sure
that the sidebar sticks to the right side of the browser.
    width: 280px;
}

 三另外

Unlike absolute and fixed positioning, an element that is relatively positioned is still part 

of the flow of the page, but at the last moment, just before the element is displayed, the 

browser offsets its position. 

border-collapse: collapse;

When you do this, your browser will ignore any border spacing you have set on the table. 

It will also combine two borders that are right next to each other into one border. This 

"collapses" two borders into one.