Question

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 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);
}

Answer 1

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.