初学者CSS定位（浮动）

Question

I'm new to CSS positioning and I'm trying to fix a problem I'm having regarding the positioning of my div's in my layout.

I'm trying to create this right here: ( http://www.subcide.com/images/dynamic/css-layout/floatexample3.gif )

however, when I follow the instructions precisely, something happens.

Here is the code and the working example to my problem ( http://rendera.heroku.com/usercode/a8dd085e8500914d5c8c3a89880cb3d513b54cdb )

Notice how the dark green div isn't lining up with the normal green div. It's instead leaving that white space to the right, which I don't need. How can I fix this? I used the float tag in my CSS to float the dark green to the right, and to no avail.

I apologize for such a juvenile question. I figure this is the best place to post and I don't know where else to look for help. I hope I can ask more questions in the future.

Answer 1

Change:

#Content{
    background:green;
    margin-right:280px;
}

to:

#Content{
    float: left;
    background:green;
    width:480px;
}

Answer 2

From the tutorial you're working on the layout should be:

<div id="page-container">
    <div id="main-nav">Main Nav</div>       
    <div id="header">Header</div>
    <div id="sidebar-a">Sidebar A</div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
</div>

In your code, you have: Header, content, sidebar, footer.

Switch the order that content and sidebar appear in your code and it will work.