webwiz

decibel.places — Tue, 20 Jan 2009 03:37:24 +0000

webwiz wrote:

Alternatively, you could use display: inline-block; with a fix for Firefox.

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>

Hi cnc, Welcome to TWF! You

decibel.places — Tue, 20 Jan 2009 03:36:34 +0000

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>

Alternatively, you could use

webwiz — Tue, 20 Jan 2009 00:39:24 +0000

Alternatively, you could use display: inline-block; with a fix for Firefox.