floating div aligning problems

i have this layout and i have these two divs, maincontent and extracontent. there supposed to float beside eachother. but when i have more than one extracontent div it slides down the main content for some reason. can you help me fix it?

i have provided a js fiddle, http://jsfiddle.net/XzRun/

HTML

<div id="container">
    <div id="content">

        <div class="extracontent">
            <h1>Other header</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
        </div>
        <div class="extracontent">
            <h1>Other header</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis nunc orci, dignissim sagittis urna.</p>
        </div>

        <div class="maincontent">
            <h1>Some header text</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat aliquam justo, nec faucibus nulla porta eget. Fusce ipsum quam, interdum posuere aliquam non, laoreet sed leo. Maecenas luctus, tellus varius fermentum gravida, libero metus pharetra sem, ac scelerisque erat felis vestibulum diam. Donec vulputate eleifend interdum. Etiam ultrices, ante vitae luctus hendrerit, quam justo tempor tortor, pulvinar euismod quam ligula vel eros. Duis vel tellus mi, congue gravida purus. Nulla facilisi. Fusce ac magna arcu, sed vulputate justo. Quisque nec ante vitae lorem laoreet lobortis. Phasellus euismod 开发者_Python百科urna sed turpis tincidunt vehicula. Aenean consequat rutrum sapien vel tincidunt. Mauris tincidunt pretium nisi nec ultricies. Aenean a sem nunc. Nunc luctus, metus in adipiscing hendrerit, lacus felis mollis dui, quis feugiat leo mi nec dolor.</p>
        </div>

    </div>
</div>

CSS

#container {
    width:1000px;
    margin:0 auto;
    padding:20px 0;
    text-align:left;
}
#content {
    margin-left:10px;
    float:left; /* lines up the left #content and the right #sidebar div's beside   eachother */
    width:810px;
}
.maincontent {
    float:left;
    margin:10px 10px 10px 0; /* double the right side because left has 0 */
    padding:0 20px;
    width:506px;
    color:rgb(50,50,50);
    background:rgb(255,255,255);
}
.extracontent {
    clear:left;
    float:left;
    margin:10px 10px 10px 0; /* double the right side because left has 0 */
    padding:0 20px;
    width:200px;
    height:200px;
    color:rgb(50,50,50);
    background:rgb(255,255,255);
}

The problem is that divs are always floated horizontally, not vertically. What you want to do here is to float the .extracontents vertically, while keeping the horizontal relationship. To do this, wrap all the .extracontent divs in a '.allextras` div, with the following css:

.allextras { clear: left; float: left; width: 220px; }

Or however you want it styled to get the margins the way you want.

Im not particularly sure of what you want to achieve.

If you want to have two extra content panels beside each other, your either going to have to widen or shrink extra and main content. To do this i recommend that you use some JQuery to determine the amount of .extracontent and then change the width according to that.

The best way would be to put .extracontent inside a container with static width and then do something like: divide extracontent.width by (extracontent in parent).count.

You could also stretch #content to have a min-width instead of fixing the width to be 1000

As defined in your CSS, your #content has width 810px, your .maincontent has width 506px and your .extracontent has width 200px. If you add an extra .extracontent, you will have total 906px. So it goes beyond 810px and slides down.

Your #content that surrounds the one #maincontent and two #extracontents has a smaller width then all of them. 506 + 200 + 200 + all of the margins > 810px. Give it some more room and your divs won't drop to other levels.