Log in

View Full Version : how to float text to the right and link to the left



IRG
10-27-2008, 04:50 PM
I have a footer where I need to have text floated to the right and a link floated to the left on the same line.

I put the text and the link in the unordered list and applied the following css to display them inline:

#footer ul li{
display:inline
}

Then I applied float right to the link but it causes the link to move one line down. Is it possible to do it using float or should I use padding and margines in order to do it?

Medyman
10-27-2008, 04:59 PM
<ul>
<li class="right">Text</li>
<li><a href="#">Link</li>
</ul>

CSS:

ul {
margin:0;
padding:0;
list-style:none
}

li {
display:inline
}

li.right {
float:right;
}

Basically, the "floated" element should appear first in your markup. I'm pretty sure this is a Firefox-only bug. Most other modern browsers should display your footer properly with the styling you have now.