Divs in place of table not lining up

Trying to use divs rather than a table and the columns won't line up even though they all have the width set the same in the CSS开发者_运维百科. Here it is

<div class="title_container">
            <div class="duty_date">
                Date
            </div> 
            <div class="duty_name">
                Duty Name
            </div>
            <div class="duty_start">
                Start Time  
            </div>
            <div class="duty_end">
                End Time
            </div>
            <div class="duty_location">
                Duty Location
            </div>
            <div class="duty_manager">
                Duty Manager
            </div>                
            <div class="duty_members">
                Required Members
            </div>
            <div class="duty_spaces">
                Spaces
            </div>
            <div class="duty_notes">
                Notes
            </div>
        </div>

and the css:

.duty_date, .duty_name, .duty_start, .duty_end, .duty_location, .duty_members,               

.duty_manager, .duty_spaces, .duty_notes {
text-align: center;
border-right-style:solid;
border-right-width: 1px;
display: table-cell;
vertical-align: middle;
height:50px;
}


.duty_date, .duty_spaces {max-width:70px; width:70px;}

.duty_name, .duty_location {max-width: 150px; width:150px;}

.duty_start, .duty_end {max-width:90px; width:90px;}

.duty_manager, .duty_members {max-width:80px; width:80px;}

.duty_notes {max-width:180px; width:180px;}

Should I just use a table?

Should I just use a table?

Yes! That's tabular data, so you should just use a table.

It's a common fallacy to think "tables must never be used". Trying to emulate a table with divs is just as bad as using tables for layout.

In this case I think using a table would be perfectly acceptable. When using a table for actual design elements in a page, the <div> tags are a better option, but for displaying straightforward information like in this example, go ahead and use a table.

IMO yes - definitely a table and save yourself the pain!

From a semantic point of view using tables is the right choice for "tabular data", this will also enable you to use more structured tags like <th>. Please have a look at the specs http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html.

In my firefox browser, it looks OK. You must have a different browser. But I would suggest you use table because that's exactly what html table is for, unless you have a strong reason not to.

If you wanted to use <div>, use:

.duty_date, .duty_name, .duty_start, .duty_end, .duty_location, .duty_members,
.duty_manager, .duty_spaces, .duty_notes
{ 
    text-align: center;
    border-right-style: solid; 
    border-right-width: 1px; 
    display: block;  
    height: 50px;
    line-height: 50px;
    float: left;
} 

This is untested :)

Setting line-height equal to the height of an element will give you text that is centered vertically. You might have to add a clearing element after each row. So it would be like:

<div>Row1Cell1</div>
<div>Row1Cell2</div>
etc...
<div class="clear"></div>
<div>Row2Cell1</div>
etc...

With

.clear
{
    clear: both;
}