Floating <span> to right edge of <h3>

**4midori** · May 2, 2011 17:31

Hi,

Not sure how to do this (see image).

I have a span with the PRO background image. I want to have it follow the h3.

PHP Code:


<div class="recent-user">
                    <a href="/user/profile/JuliaMcConahay">
                        <img class="simple-border"  src="/dimages/load/11539_329332820388_636320388_9943867_1593113_n.jpg/tiny">
                    </a>
                    <h3>
                        <a href="/user/profile/JuliaMcConahay" class="more">
                            JuliaMcConahay</a>
                    </h3><span class="pro-badge"></span>

Not sure what CSS to use for <span class="pro-badge"></span>.

I have this:

Code:

span.pro-badge { 
margin-left:3px; 
float:right; 
width:21px; 
height:13px; 
background:url('/img/profile/pro-badge.png'); 
background-repeat:no-repeat; }

but it doesn't cooperate.

Thanks,

Ben

**ralph.m** · May 2, 2011 19:02

Firstly, you'd need to put the span inside the H3 for better results. But …

If you are just using a background image, there's no need for the span at all. Instead, put some right padding on the H3 and add in the image there as a background.

Only thing is, you'd need to put a special class on any H3s with that image. E.g.

Code:

h3.pro-badge { 
  padding-right:24px;  
  background:url('/img/profile/pro-badge.png') no-repeat 100% 50%; 
}

**Paul O'B** · May 3, 2011 04:26

Hi,

As Ralph said you could just use a background image n the h3 if you want the image at the far right. However if you want the image to be at the end of the text and not the end of the line then you will need to have the span follow the text and then set it to inline-block.

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.recent-user h3 span {
    display:inline-block;
    width:21px;
    height:13px;
    background:url('/img/profile/pro-badge.png') no-repeat;
    margin:0 0 0 5px;
   overflow:hidden;
}
</style>
</head>
<body>
<div class="recent-user">
    <p><a href="/user/profile/JuliaMcConahay"><img class="simple-border"  src="/dimages/load/11539_329332820388_636320388_9943867_1593113_n.jpg/tiny"></a></p>
    <h3><a href="/user/profile/JuliaMcConahay" class="more"> JuliaMcConahay</a><span></span></h3>
</div>
</body>
</html>

No class necessary unless you have loads of spans in h3s in that context.

If using floats then floats must come first before the block content you want then to wrap so you would have to float the anchor to the left as well and then float the span left (or right if needed).

Be careful with all the inline elements left hanging in mid air as it causes a number of bugs in iE at times and is bad semantically also. Always keep elements at the right level so an inline element shouldn't end and then run straight into an opening block level tag. That's why I wrapped your first line in a p element (although a div would be fine also).

**4midori** · May 3, 2011 11:29

Thanks to both, this is very helpful!

User Tag List

Thread: Floating <span> to right edge of <h3>

Thread Tools

Display

Hybrid View

Floating <span> to right edge of <h3>

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions