Single DIV, image left, text right

HTML & CSS
1

Am I being really stupid?!!!

What I am trying to do, but am so-far failing miserably, is have a single DIV tag and within that DIV tag an image is aligned to the left, and some text is aligned to the right. Like this:

========================
I                                          I
I  Image                    Text      I
I                                          I
========================

Both would be vertically aligned in the middle.

I have this code, but it’s not working. To those of you who are in the know, it’s probably pretty self-evident what code I need, but I’d be really grateful if someone could help me!!

== CSS ==

#cancelback {
	width: 200px;
	border: 1px dashed red;
	margin-top: 10px;
	}

.cancelback p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000;
	display: inline;
	float: right;
	text-align: right;
	}
	
#cancelimage {
	float:

== XHTML ==

<div id="cancelback">
              <p><img src="images/back.gif" width="31" height="17" />Hello</p>
            </div>

Thanks

Ben

2

The css for floating the image should look something like this.

#cancelback {
width: 200px;
border: 1px dashed px;
margin-top: 10px;
}
#cancelback img {
float: left;
clear: left;
}

XHTML:
<div id=“cancelback”>
<p><img src=“images/back.gif” width=“31” height=“17” />Hello</p>
</div>

you can also style the <p> tage anyway you want in the CSS as well just like you have. But I’ve left that part out.

Hope that helps,
Deron

3

Thanks a lot - any chance you can explain exactly what the:

clear: left;

does. I’m a bit confused!

4

I’m sorry…you don’t need that clear: left; in there. Its only used if you have more than one image.

Like if you were floating three images left in the same <div>, you would have to use the clear: left; attribute so the images would line up underneith one an other…otherwise if you don’t use clear: left; the images will line up side by side.

5

thanks for this tip. I was trying to do that the other day and could’nt figure out how to do that :wink: