Question

This is my first SO post, forgive me if my formatting stinks.

I’m trying to format some product categories listings. Categories are grouped together by classification. I can get the .preview_box divs to align the way I want and I can get the contents of the .preview_box divs to align the way I want. What I can’t figure out how to do is keep the .classification divs appearing inline and centered. The way I’m getting them inline now is by putting a left float on them, which negates the ability to center them.

How can I center block contents with unknown widths in an unknown width div when my overall page layout’s container’s width is unknown also (80%, min-800px, max-1200px)?

Here’s an idea of my html & css:

<div class="previews">
  <% @classifications.each do |classification| %>
    <div class="classification">
      <h3>
        <%= classification.title %>
      </h3>
      <% classification.subcategories.each do |subcategory| %>
        <div class="preview_box">
          <div class="subcategory_preview_image">
            <% if subcategory.image? %>
              <%= link_to image_tag(subcategory.image.url(:thumbnail)), abbr_subcategory(subcategory) %>
            <% elsif subcategory.products.present? and subcategory.products.first.product_images.present? %>
              <%= link_to image_tag(subcategory.products.first.product_images.first.image.url(:thumbnail)), abbr_subcategory(subcategory) %>
            <% else %>
              <%= link_to image_tag('subcategories/missing.png'), abbr_subcategory(subcategory) %>
            <% end %>
          </div>
          <div class="subcategory_preview_text">
            <%= link_to subcategory.title, abbr_subcategory(subcategory) %>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

.previews {
}
.classification {
  margin: 3px;
  padding: 3px;
  float: left;
  text-align: center;
}
.previews .preview_box {
  position: relative;
  width: 120px;
  height: 150px;
  float: left;
  margin: 10px;
}
.previews .preview_box .subcategory_preview_image {
  position: absolute;
  bottom: 40px;
  width: 120px;
}
.previews .preview_box .subcategory_preview_image img {
  display: block;
  margin: 0 auto;
}
.previews .preview_box .subcategory_preview_text {
  position: absolute;
  top: 110px;
  width: 120px;
  text-align: center;
}

Here’s an idea of how it looks currently.

What I’m trying to do is center those gray boxes in the container without having each gray box on its own line, without knowing the width of any of the gray boxes or the width of the white container.

Answer 1

I’m not sure if i understand you correctly but this may work for you.
You need to adapt it to your needs but it should work

http://jsfiddle.net/wxarF/

Update:
http://jsfiddle.net/wxarF/1/

CSS:

.previews {
    width: 600px;
    text-align: center;
    border: 1px solid #ccc;
    padding: 20px;
}

.classification div {
    display: inline-block;
    background: #eee;
    padding:3px;
    margin:0 5px 5px 0;
    border: 1px solid #ccc;
}

.preview_box {
    display: inline-block;
    background: #ccc;
    margin-right: 3px
 }