Simple CSS Float Problem

Question

I have a simple problem with an image going under text, rather than beside it.

Markup is like this:

<div class="footer">
     <p>bla bla bla bla</p>
     <a href="url_here" class="next" title="Next"><span>Next</span></a>
</div>

CSS is like this:

div.footer p {
    color: #FFF;
    width: 80%;
    margin: 0 auto;
    padding:0;
    border: 1px solid white;
}
div.footer a.next {
    background-repeat:no-repeat;
    display: block;
    float: left;
    margin-left: 2em;
    height: 52px;
    width: 24px;
    background-image: url('../gfx/arrow-right.jpg');
    margin-left: .7em;
}
div.footer a.next span {
    display: none;
}

The paragraph seems to want to push the link below it, rather than floating in the free space beside it. Any ideas? The <p> is only 80% wide, so it's got a lot of space to display the link.

Cheers

Answer 1

The paragraph is a block level element and will force itself to be on a new line after the last element and force the next element to be on a new line.

if you want the link on the left (you have a float :left on the anchor) try floating the paragraph to the right.

try

div.footer p{
     ...
     float:right;
}

see http://jsfiddle.net/2PXt6/1/

if you want the anchor to float to the right of the paragraph, move the anchor to be before the paragraph and put a float: right on the anchore tag.

EDIT: To have the anchor on the Right have the anchor first in the html and float:right see http://jsfiddle.net/2PXt6/4/

if you do not want to change the html, float the paragraph to the left and the anchor to the left. see http://jsfiddle.net/2PXt6/5/

Answer 2

What you're describing sounds like the proper behavior for a "p" tag. See here. If you don't want the link below it why don't you use a "div" instead of a "p" tag? You should be able to transfer all styles over to the new div.

Update: I think the HTML below would do what you are saying. I did the styles inline for simplicity, you'll want to move those to your css file.

<div class="footer">
     <div style="float:left">bla bla bla bla</div>
     <a href="url_here" style="float:right" class="next" title="Next">Next</a>
</div>

Answer 3

In fact, I would do this:

div.footer p {
    float: left;
    ...
}

Answer 4

p is a block level element, so unless you float it, things after it will be underneath it.

You can either float the paragraph or put the link before it in the html.