class="last" not working as expected?

[leftdrive]

What am I missing here?

I am trying to get a 4-8-4-8 layout where the span-4 contains a logo
image, and the span-8 contain company description. I feel like the
example below should not need the '<hr class="space">'. However, try
the example below and remove '<hr class="space">' and you find the
second "row" floats into the first row. I have tried every possible
clearfix I can think of.


<div class="container">

<div class="span-4">
<img src="http://l.yimg.com/a/i/ww/beta/y3.gif" width="150"
height="44" alt="logo">
</div>

<div class="span-8">
FEATURE TITLE
</div>


<div class="span-4">
<img src="http://l.yimg.com/a/i/ww/beta/y3.gif" width="150"
height="44" alt="logo">
</div>

<div class="span-8 last">
FEATURE TITLE
</div>

<hr class="space">

<div class="span-4">
<img src="http://l.yimg.com/a/i/ww/beta/y3.gif" width="150"
height="44" alt="logo">
</div>

<div class="span-8">
FEATURE TITLE
</div>


<div class="span-4">
<img src="http://l.yimg.com/a/i/ww/beta/y3.gif" width="150"
height="44" alt="logo">
</div>

<div class="span-8 last">
FEATURE TITLE
</div>

</div>

[chrisbowyer]

Just add the clear class to the 5th div

<div class="container">
<div class="span-4"><img src="http://l.yimg.com/a/i/ww/beta/y3.gif"

width="150" height="44" alt="logo" /></div>

<div class="span-8">FEATURE TITLE</div>
<div class="span-4"><img src="http://l.yimg.com/a/i/ww/beta/y3.gif"

width="150" height="44" alt="logo" /></div>

<div class="span-8 last">FEATURE TITLE</div>

<div class="span-4 clear"><img src="http://l.yimg.com/a/i/ww/beta/
y3.gif" width="150" height="44" alt="logo" /></div>

<div class="span-8">FEATURE TITLE</div>
<div class="span-4"><img src="http://l.yimg.com/a/i/ww/beta/y3.gif"

width="150" height="44" alt="logo" /></div>

<div class="span-8 last">FEATURE TITLE</div>
</div>