Image on one side, text on the other

I hope I can explain what is going on!

[bateman_ap]

Hi, I am trying to make a panel where there is a 60px x 60px image on the left hand side, with some description text on the right, then repeated 5 times down the panel. It is all working perfectly in IE however Firefox is displaying it wrongly (or most prob correctly!)

So, it should look like (and does in ie):
(imagine . as a space and - as a image)

----- This is the 
----- description 
----- text that 
----- goes to the right 
________________________ 
----- This is the 
----- description 
----- text 2 that 
----- goes to the right 
_________________________ 
----- This is the 
----- description 
----- text 3 that 
----- goes to the right 
________________________ 

However it looks like this in firefox:

----- This is the 
----- description 
......----- 
......----- 
......----- 
......----- 
......----- 
----- This is the 
----- description 
----- text 2 that 
----- goes to the right 
----- This is the 
......description 
......text 3 that 
......goes to the right 

I have the following code:

.boxarea {
width: 159px;
height: auto;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #366261;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}
.boxpic {
height: 60px;
width: 60px;
float: left;
}
.boxtext {
width: 94px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
font-weight: bold;
}

<div class="rightmenubody">
<div class="boxarea">
<div class="boxpic"><img src="/images/143.jpg" alt="" /></div>
<div class="boxtext">This is some text<br />
And some more</div>
</div>
<div class="boxarea">
<div class="boxpic"><img src="/images/143.jpg" alt="" /></div>
<div class="boxtext">This is some text<br />
And some more</div>
</div>
<div class="boxarea">
<div class="boxpic"><img src="/images/143.jpg" alt="" /></div>
<div class="boxtext">This is some text<br />
And some more</div>
</div>
<div class="more">view more</div>
</div>

[Birdman]

Since you are floating all the content, you need to "clear" each new box. I also added some shorthand :)

.boxarea {
width: 159px;
height: auto;
border-bottom: 1px solid #366261;
padding: 5px 0;
clear: both;
}

[bateman_ap]

Many thanks, we are almost there. The only thing now is the border cuts into the first line of text below it.

Thanks for the cleanup as well, must go through my code and clean it all up, it is a awful mess!

[Span]

What you really need is a clearing element in each box. That will make the border encompass the floats.

.boxarea {
width: 159px;
height: auto;
border-bottom: 1px solid #366261;
padding: 5px 0;
}

br.clear {
clear:both;
font-size:1px;
}

<div class="boxarea">
<div class="boxpic"><img src="/images/143.jpg" alt="" /></div>
<div class="boxtext">This is some text<br />
And some more</div><br class="clear" />
</div>

[Birdman]

If the text is running higher than the pic to it's left and you want it lowered, add some top-margin to the boxtext class. If you are happy with the way the text and pic line up, try adding top-margin to the boxarea class.

Many thanks

Most welcome!

Added: span may well be correct here. You may want to try that solution first.

[bateman_ap]

Many thanks both, span's additional solution worked perfectly.