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

image



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 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.

JacopeY said...

Thanks -- I was having a hard time figuring out how to align 4 divs and i then bumped into your post.

Anonymous said...

A genuine thank you! I wasted 3 hours of my life with this until I read your post!

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.

Anonymous said...

it was really helpful, and that was what i exactly was looking for :) thank you so much!

Ohana said...

what you do when you hava diffrent size of content from each div? how to you handle the hight?!

Anonymous said...

truly awesome man!!! i wasted 3 hours but did not find a single solution.

Thanks

Anonymous said...

Thanks Agarwal, post about aligning multiple Div's is so clear to understand and implement.