Floating <span> to right edge of <h3>

HTML & CSS
1

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.


<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:


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

2

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.

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

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.


<!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 {
   [B] display:inline-block;[/B]
    width:21px;
    height:13px;
    background:url('/img/profile/pro-badge.png') no-repeat;
  [B]  margin:0 0 0 5px;[/B]
   [B]overflow:hidden;[/B]
}
</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>[B]<span></span>[/B]</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).

4

Thanks to both, this is very helpful!