How to get different height html divs to float up

Answer 1

If you want the divs to stack vertically in all browser agents, you'll need to wrap each 'section' in a containing element. Here's an example of what I mean.

the css

// let's reset our elements
.site-container,
.element-container,
.my-element {
    margin: 0;
    padding: 0;
}
.site-container {
    display: block;
    width: 960px;
    margin: 0 auto; /* centers your site container on the page */
    clear: both; /* basic float clearing */
}
.element-container {
    display: inline-block;
    float: left;
    width: 300px; /* we'll have 3 sections width 10px spacing */
    margin-right: 10px;
}
.element-container.last {
    margin-right: 0;
}
.my-element {
    width: 280px; /* 300 - 20px [total padding] = 280px */
    margin-bottom: 10px; /* add a bottom margin */
    padding: 10px; /* makes our element 320px wide */
}

// make background-color classes
.bg-red {
    background-color: #ff0000;
}
.bg-blue {
    background-color: #3b8acd;
}

the markup

    


        

            

                1
            

            

                2
            
        


        

            

                3
            

            

                4
            
        


        

            

                5
            

            

                6
            
        


    
    

As far as the seventh div you have, I would suggest making it span across the entire site-container. It's aesthetically pleasing :)