Centering div tags
Hi, this is my first post and I am fairly new to dreamweaver and css so I apologize if this question is very basic but here goes.
I would like to place 3 divs inside my container div and center them as a group inside the container without using padding. Can someone give me some direction?
Thanks
decibel.places posted this at 03:36 — 20th January 2009.
He has: 1,494 posts
Joined: Jun 2008
Hi cnc,
Welcome to TWF!
You can try this:
(why not 33.3%? that pushes the right div below... probably some default css setting that can be overwritten, but is anybody really going to notice a .3% error?)
<html>
<head>
<title> centered divs </title>
<style>
#container {width: 500px;}
.innerdiv {float: left; width: 33%; text-align: center}
</style>
</head>
<body>
<div id="container">
<div class="innerdiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lobortis. Nam ac nisi. Phasellus molestie. Aliquam ante urna, dignissim vitae, sollicitudin sit amet, interdum id, mi! Vivamus placerat, nisi nec viverra elementum, nisi risus pharetra nulla, ut eleifend mi risus sit amet leo. Ut varius pretium ligula. Nullam congue gravida nulla. In consectetur mollis mi. Etiam elit. Integer augue quam; consectetur sed, ullamcorper at, tincidunt eget, nulla. Duis venenatis. Aenean eu tellus. Ut dignissim! Etiam facilisis risus eu tellus. Curabitur malesuada lectus sit amet lacus. Sed laoreet varius sapien. Donec blandit nulla a elit. Ut consectetur porttitor orci.
</div>
<div class="innerdiv">Integer laoreet elementum turpis. Nam tortor. Integer condimentum. Praesent commodo, erat vitae mollis elementum, velit sem ullamcorper arcu, sollicitudin porttitor tortor est nec augue. Suspendisse malesuada pretium sapien. Nullam leo urna, tincidunt in, consequat in, tristique vitae, orci. Suspendisse egestas pellentesque neque. Sed et elit a enim tristique consectetur? Suspendisse potenti. Proin magna. Curabitur eros nunc; imperdiet et, adipiscing a, laoreet id, diam. Donec orci. Nam nec nisl! Nam eget nulla. Vestibulum sapien diam, lacinia at, lacinia sit amet, ullamcorper ut, odio. Etiam volutpat posuere nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="innerdiv">Aliquam vel quam ac eros suscipit volutpat. Donec lorem. Nulla aliquet iaculis turpis. Nunc adipiscing est vitae eros. In ultrices magna sed est. Nulla facilisi. Quisque elementum lectus. Pellentesque a mi in nisi placerat vehicula. Praesent scelerisque suscipit diam. Cras eu risus? Morbi elementum quam vitae leo.</div>
</div>
</body>
</html>
webwiz posted this at 00:39 — 20th January 2009.
He has: 629 posts
Joined: May 2007
Alternatively, you could use display: inline-block; with a fix for Firefox.
decibel.places posted this at 03:37 — 20th January 2009.
He has: 1,494 posts
Joined: Jun 2008
I like that solution, webwiz...
However, neither approach truly centers the contained divs by distributing them evenly inside the container -
the display: inline-block will squeeze them together centered in the container, so margins or padding would still be required on the inner divs
the float: left will also line them up horizontally, but really only "works" if the divs comprise 99% of the container width, otherwise, margins or padding would be needed on the inner divs too
So here is my code using display: inline-block
Actually, I had to move vertical-align: top out of the IE only section, otherwise the last div was pushed to the bottom in Opera...
One thing is puzzling me:
The [if IE] section should replace display: inline-block with display: inline for the .innerdiv class; however, it does not work in IE if either one is removed. How can the element have two different display properties at once?
<html>
<head>
<title> centered divs </title>
<style type="text/css">
#container{
width: 500px;
text-align: center;
border: 1px solid #000;
padding: 1em;
}
.innerdiv {
display: -moz-inline-box;
display: inline-block;
vertical-align: top;
width: 30%;
}
</style>
<!--[if IE ]>
<style type="text/css">
.innerdiv {
display: inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div class="innerdiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lobortis. Nam ac nisi. Phasellus molestie. Aliquam ante urna, dignissim vitae, sollicitudin sit amet, interdum id, mi! Vivamus placerat, nisi nec viverra elementum, nisi risus pharetra nulla, ut eleifend mi risus sit amet leo. Ut varius pretium ligula. Nullam congue gravida nulla. In consectetur mollis mi. Etiam elit. Integer augue quam; consectetur sed, ullamcorper at, tincidunt eget, nulla. Duis venenatis. Aenean eu tellus. Ut dignissim! Etiam facilisis risus eu tellus. Curabitur malesuada lectus sit amet lacus. Sed laoreet varius sapien. Donec blandit nulla a elit. Ut consectetur porttitor orci.
</div>
<div class="innerdiv">Integer laoreet elementum turpis. Nam tortor. Integer condimentum. Praesent commodo, erat vitae mollis elementum, velit sem ullamcorper arcu, sollicitudin porttitor tortor est nec augue. Suspendisse malesuada pretium sapien. Nullam leo urna, tincidunt in, consequat in, tristique vitae, orci. Suspendisse egestas pellentesque neque. Sed et elit a enim tristique consectetur? Suspendisse potenti. Proin magna. Curabitur eros nunc; imperdiet et, adipiscing a, laoreet id, diam. Donec orci. Nam nec nisl! Nam eget nulla. Vestibulum sapien diam, lacinia at, lacinia sit amet, ullamcorper ut, odio. Etiam volutpat posuere nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="innerdiv">Aliquam vel quam ac eros suscipit volutpat. Donec lorem. Nulla aliquet iaculis turpis. Nunc adipiscing est vitae eros. In ultrices magna sed est. Nulla facilisi. Quisque elementum lectus. Pellentesque a mi in nisi placerat vehicula. Praesent scelerisque suscipit diam. Cras eu risus? Morbi elementum quam vitae leo.</div>
</div>
</body>
</html>
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.