Webmaster Forum / HTML, CSS, Scripts / CSS / June 2007

Doing that does not center the 4 divs within it. In fact, when I try
that on anything, it is not centered. It's strange to me how difficult
this really is...

[...]

[...]

I think you were using 25% yesterday, now you're using 160px, so
provided the viewport is wider than 640px (or 640px plus a bit in IE)
then they will fit.

Using 25% was logical, it's not your fault it didn't work, but a bug (or
"weird feature" if you're extremely generous) in IE.

Although bear in mind as was pointed out that borders, padding and
margins are not included in what you set for width.

You don't have a container div at the moment. But if you put one in
around your floats, like this:

<div class="container">
   <div class="reviews">
       THIS IS COLUMN1 Pormebut there is an audibected.
   </div>
   ...

style it like this:

.container
{
   margin: 0 auto;             /* to centre it */
   display: table;             /* to give it shrink-to-fit width */
}

But for IE where display: table doesn't work, you'll have to settle for
fixing the width, but this is OK since you're setting the widths of the
things in it so you know what the total needs to be:

.container
{
   margin: 0 auto;             /* to centre it */
   width: 640px;
   overflow: hidden;           /* to make it contain the floats
                                  vertically */
}

The problem is that from what I hear, on IE, the fourth column might
jump down with that 640px even though 4 * 160 = 640. So you'll have to
give it a bit more than 640px. And then it won't be properly centered.
So you can use an actual table instead.

<table class="container">
   <tbody>
       <tr>
           <td>
               <div class="reviews">
                   THIS IS COLUMN1 Pormebut there is an audibected.
               </div>

               etc.
                   
But if you're going to use a table you might as well give it four
columns and not bother with the floats.

Ideally, you would use this instead:

.container
{
   text-align: center;
}

.reviews
{
   width: 160px;
   vertical-align: top;
   text-align: left;
   display: inline-block;
}

which works in Opera and Konqueror, and might even work in IE, but not
Firefox.