semantic sugestions for a column/row layout

[ckdesign]

Hey every one, I need some advice on creating the markup for a page I am working on. Right now I think I have a case of div-itus going on and I am at a loss for how to make this better.

Here is a fiddle of what I have:
http://jsfiddle.net/cyBMa/12/



Or if you prefer this is what it needs to look like:

Address                           
12345 Street Name           |  VIEW MAP BUTTON   |
City, ST 12345                 


Contact Us                    
email@example.com           |  E-MAIL US BUTTON   |
                                      
_____________________________________________ <-border under contact info

Here is my current mark-up:

<div class="column_wrapper">
  <div class="item_row">    
    <div class="column_one">
      <span class="title">Store Name</span>
      <address>
        123 Street Name<br />
        City, ST 12345
      </address>
    </div>
    <div class="column_two">
      <a class="small_button" href="http://maps.google.com/m?address">view map</a>
    </div>                
  </div>
  <div class="item_row">
    <div class="column_one">
      <span class="title">Contact Us</span><br />
      email@example.com
    </div>
    <div class="column_two">
      <a href="mailto:email@example.com" class="small_button">E-Mail Us</a>
    </div>
  </div>
</div>

CSS:

.column_wrapper {
    padding: 0.9em 0em;
    border-bottom: 0.12em solid #000;
}

.item_row:first-child,
.column_wrapper:first-child{
    padding-top:0em;
}

.item_row {
    overflow:hidden;
    clear:both;
    padding-top: 0.9em;
}

.column_one,
.column_two {
     width:50%;   
}

.column_one {
    float:left;
}

.column_wrapper .column_two {
    float:right;
}

.title {
    color:#7a1820;
    font-weight:bold;
}

body {
    font: 13px/1.231 sans-serif;
}

.small_button {
    display:block;
    float:right;
    width:30%;
    padding: .5em 0em;
    background-color:#7a1820;
    color:#fff;
    text-transform:uppercase;
    text-align:center;
}

Can this be trimmed down any more or am I stuck with this?

[sdleihssirhc]

Here's my take. And these are the changes I made:

• I rearranged the divs for the columns and the rows. It's a little cleaner now, in my opinion.
• Instead of putting the headers in spans, I put them in actual headers (I used <h2> just because; the actual element you'd use depends on context).
• I also got rid of the <address> element because <address> is only for the document's maintainer's contact information.
• Instead of giving each row a padding-top, and then getting rid of the padding-top of the first row, I gave each row a padding-bottom.
• Elements that are floated are automatically given display: block, so I got rid of that rule from .small_button
• The zoom: 1 rule is just a bugfix for IE6

A downside is that just about every single element in there has a class...

[ckdesign]

Thank you much! I like that I can shave off a div. Don't know why I did not think about getting rid of those. I did not know if using a header tag was considered semantically acceptable because it was not the header for an article so that is why I did not use it.

did not know about the address thing, I read somewhere that android phones can detect the address block and use it to map a location so that is the only reason I used it, but if I was using it wrong then that probably is not the case. I will have to look into that address mapping thing and see if there is some micoformat that people use