Aligning Multiple DIV’s using CSS

A very frequently asked question is how to align Multiple DIV’s using CSS. I had recently done a post on Aligning two div's next to each other using CSS

Here’s how to align multiple DIV’s. For simplicity sake, I will aligning 3 DIV’s

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Aligning Multiple DIV's using CSS</title>
    <style type="text/css">
    .divOuter{
        display:inline;
        text-align:center;
    }

    .divInner1, .divInner2, .divInner3{
        border: 1px solid;
        float:left;
        width:150px;
        height:150px;
        margin-left:3px;
        margin-right:3px;
    }
    </style>
</head>
<body>
<div class='divOuter'>
    <div class='divInner1'>First DIV</div>
    <div class='divInner2'>Second DIV</div>
    <div class='divInner3'>Third DIV</div>
</div>
</body>
</html>

OUTPUT

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

8 comments:

Anonymous said...: Wow. Man. You've really opened our eyes. What an incredible and original way of handling HTML with CSS. Who could ever imagine. Truly innovative masterpiece. Write a book about this. No, really. You gonna come a billionaire with this, I wonder why in the world you've even shared this kung-fu with us.; August 15, 2009 at 1:58 AM
JacopeY said...: Thanks -- I was having a hard time figuring out how to align 4 divs and i then bumped into your post.; August 17, 2009 at 1:17 AM
Anonymous said...: A genuine thank you! I wasted 3 hours of my life with this until I read your post!; August 21, 2009 at 6:19 AM
Anonymous said...: Exactly what I was looking for, however, how do you center align those divs withing the containing div.

In your example image the divs are off to the left.; October 8, 2009 at 2:01 PM
Anonymous said...: it was really helpful, and that was what i exactly was looking for :) thank you so much!; March 21, 2011 at 11:53 PM
Ohana said...: what you do when you hava diffrent size of content from each div? how to you handle the hight?!; July 18, 2011 at 6:07 AM
Anonymous said...: truly awesome man!!! i wasted 3 hours but did not find a single solution.

Thanks; November 7, 2012 at 7:54 AM
Anonymous said...: Thanks Agarwal, post about aligning multiple Div's is so clear to understand and implement.; December 7, 2012 at 1:08 AM