Three columns and links

This is weird. I have a "wrapper" with three columns like this: http://d.imagehost.org/view/0543/cssproblem

The first column has a picture, the second column has text and the third column has three links. It works fine if the third block has just text and not links (see the top of the linked picture) but when I make links out of the text, the text is no longer side by side (see the bottom of the linked picture).

I just can't understand what's wrong with the code. How can the text in the third column to stay side by side even when they are links?

css:

.wrapper{
margin-left: 45px;
margin-bottom: 4px;
width: 466px;
height: 22px;
}

.first{
width: 22px;
float: left;
}

.second{
width: 266px;
float: left;
}

.third{
width: 178px;
float: right;
}

p.text1 {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1.2em;
text-align: left;
margin-left: 12px;
margin-top: 3px;
}

p.text2 {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-align: right;
}

a.opt { 
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}

a.opt:visited { 开发者_运维百科
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}

a.opt:active { 
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}

a.opt:hover { 
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: underline;
}

html:

<div class="wrapper">
<div class="first><img src="image.gif" /> </div>
<div class="second"><p class="text1">Some text here</p></div>
<div class="third"><p class="text2"><a class="opt" href="http://">LINK 1</a> | <a class="opt" href="http://">LINK 2</a> | <a class="opt" href="http://">LINK 3</a></p></div>
</div>

---

My guess is that it's the float: right declaration in your .third class. Try starting by adapting your CSS to look like this:

.wrapper{
margin-left: 45px;
margin-bottom: 4px;
overflow: hidden;
width: 466px;
height: 22px;
}

.first{
width: 22px;
float: left;
}

.second{
width: 266px;
float: left;
}

.third{
width: auto;
overflow: hidden;
}

That eliminates the need for the right-floating div. That should hopefully clean things up enough. If not, I'll modify my answer.