How can I get these span elements to expand to fill their full height?

Question

CSS:

.events_holder {
    width:100%;
    background-color: #d9ceae;
}
    .events_holder .event_holder {
     width:100%;
     float: left;
     min-height: 20px;
    }
     .events_holder .event_holder .event_data {
      border: thin gray dotted;
      font-size: 80%;
      float:left;
      min-height:20px;
     }

     .events_holder .event_holder .event_date {
      width: 22%;
     }

     .events_holder .event_holder .event_title {
      width: 22%;
     }

     .events_holder .event_holder .event_venue {
      width: 15%;
     }

     .events_holder .event_holder .event_city {
      width: 27%;
     }

     .events_holder .event_holder .event_type{
      width: 10%;
     }

.events_holder, and .event_holder are both div's, the rest are spans.
Every span also has the class .event_data.
The problem I am having now, is if one of the spans are taller than 20px, the other spans do not expand with them.

How can I get the height of the spans to be equal?

---

Markup:

<div class="events_holder"><div class="event_holder">
       <span class="event_date event_data faded">06/30/09<br>08:06 pm - 10:06 pm</span>

       <span class="event_title event_data">
        event name<br>
        <span class="small"> subtitle for the event </span>
       </span>
       <span class="event_venue event_data">
        The NYC cafe
       </span>
       <span class="event_city event_data faded">

        My first city
       </span>
       <span class="event_type event_data faded">
        Events
       </span>
      </div>
      <div style="clear: both;"></div>
      <div class="event_holder">
       <span class="event_date event_data faded">06/19/09<br>08:06 pm - 10:06 pm</span>

       <span class="event_title event_data">
        Test Event<br>
        <span class="small">  </span>
       </span>
       <span class="event_venue event_data">
        The NYC cafe
       </span>
       <span class="event_city event_data faded">

        My first city
       </span>
       <span class="event_type event_data faded">
        Events
       </span>
      </div>
      <div style="clear: both;"></div>
      <div class="event_holder">
       <span class="event_date event_data faded">06/19/09<br>08:06 pm - 10:06 pm</span>

       <span class="event_title event_data">
        Copy of Test Event<br>
        <span class="small">  </span>
       </span>
       <span class="event_venue event_data">
        The NYC cafe
       </span>
       <span class="event_city event_data faded">

        My first city
       </span>
       <span class="event_type event_data faded">
        Events
       </span>
      </div>
      <div style="clear: both;"></div>
      </div>
      <div style="clear: both;">

Answer 1

Span is an inline element, so its naturally not going to grow to the size of its parent in the way that a block element such as a div does.

Having said that, there are a couple things I would try.

1. Make all the line height atributes of each span a fixed height - this is the only way that they will all be the same height.

2. try encasing each span column in a floating parent div, then clear the parent div.

   <div id='container'> <div id='row' style="clear:both"> <div id='column1' style='float:left'><span>text...</span></div> <div id='column2' style='float:left'><span>text...</span></div> </div> </div>

Looks like previous answers have suggesting using a table. I think a table may be better suited for what you are trying to do, but I also think its useful to know how to solve these problems using css because they do come up often.

Answer 2

Sounds to me like you are trying to do something that should be easy to do with a table .. and you can aplly all kinds of formatting to tables as well.

Maybe that's simpler to make it work ...

Answer 3

Use a table. There will be less markup and it will automatically expand the rows to the largest height and keep your columns aligned.

table {
    width:100%;
    background-color: #d9ceae;
    border-collapse:collapse;
}
td {
    border: thin gray dotted;
    font-size: 80%;
}

<table>
    <tr>
     <td>06/30/09<br>08:06 pm - 10:06 pm</td>
     <td>event name<br><span class="small"> subtitle for the event </span></td>
     <td>The NYC cafe</td>
     <td>My first city</td>
     <td>Events</td>
    </tr>
    <tr>
     <td>06/19/09<br>08:06 pm - 10:06 pm</td>
     <td>Test Event<br><span class="small">  </span></td>
     <td>The NYC cafe</td>
     <td>My first city</td>
     <td>Events</td>
    </tr>
    <tr>
     <td>06/19/09<br>08:06 pm - 10:06 pm</td>
     <td>Copy of Test Event</td>
     <td>The NYC cafe</td>
     <td>My first city</td>
     <td>Events</td>
    </tr>
</table>

Answer 4

If you're not worried too much about compatibility with IE6 and older, you can just set the span element to display as an inline block.

.events_holder span { display: inline-block; }

That being said, I'd have to agree with what the others have been saying: this looks like tabular data, therefor you should use a table. There's nothing at all wrong with using tables where appropriate, and this certainly looks like an acceptable application.

Answer 5

display: block; but you should use a table!