Assistance with aligning divs and content therein

[schwim]

Hi there folks!

I’m working on a similar content feature on a site and want to display two rows of 5 divs. Inside those, there will be a centered thumbnail and a title string below.

When I made my divs initially, they acted how I wanted. Each was the same height and width and I had two neat rows of 5 divs that were equal in height to each other. This all fell apart when I began adding content. My thumbnails are centered horizontally, and each div container is now a different height and starting vertically at different points.

Here’s the code in question. Just scroll down to “Similar Stuff” to see the problem divs.

http://schw.im/simdivs.html

Could someone help me figure out how to make two neat rows of 5, as if I used a table to make this?

Thanks for your time!

[SamA74]

@schwim

as if I used a table to make this?

display: table; is what you use when you want the layout to behave like a table, but you don’t want to actually use a <table> element.
There have been some recent threads on the subject:-

Display: table questions

I have some questions about display: table 1.) Must you use a row if there is just one? 2.) How does your browser determine the width of each of two columns? In the code below, I can’t figure out how the widths are being set… <header id="masthead"> <div id="company-info"> <div id="brand">Mikey Consulting</div> <div id="tagline">Designing mobile websites...</div> </div> <address id="company-addy"> (206) 555-1212<br /> …

[SamA74]

For 2 rows of five:’

<div class="table">
   <div class="row">
      <div class="cell">Col1</div><div class="cell">Col2</div><div class="cell">Col3</div><div class="cell">Col4</div><div class="cell">Col5</div>
   </div>
   <div class="row">
      <div class="cell">Col1</div><div class="cell">Col2</div><div class="cell">Col3</div><div class="cell">Col4</div><div class="cell">Col5</div>
   </div>
</div>

For the css, something along these lines, but alter to suit:-

.table {
   display: table;
   table-layout: fixed;
   width: 100%;
}
.row { display: table-row; }
.cell { 
   display: table-cell;
   verical-align: middle;
   text-align: center;
}

You could possibly lose the .cell class and have .row div {} as the selector for table cell.

[AllanP]

@schwim

Could someone help me figure out how to make two neat rows of 5, as if I used a table to make this?

I made it work by having and outer div and a wrap div around the ten blocks. As follows:

    <div id="outer">
      <div id="wrap">
        <div>
          <div class="blk">
          </div>
          <p>Picture</p>
        </div>
        <div>
          <div class="blk">
          </div>
          <p>Picture</p>
        </div>
etc
etc

The div class=“blk” is used here instead of an image for the example, but can be replaced by an image in your script.

This method works in all browsers back to IE7 without any problems.

You can see the whole thing working in this JSFiddle link