Forum Moderators: open

Message Too Old, No Replies

Text on left and Image on right in a div please

         

Digmen1

8:39 pm on Jun 12, 2009 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi Guys

I have a samll div which goes at the top of my pages.
I want it to show some text on the left (left aligned) and a small pic on the right (right aligned).

Here is my html so far

<div id="mydiv">
<h1 This is my text</h1>
<img src="images/nzflag.jpg" >
</div>

Any suggestions on how to get the image to align right on the same line at the text ?

Kind Regards
Digby

tedster

9:29 pm on Jun 12, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Add the attribute style="float:right;" to the img element - that should do it. Add some margin to the style rules to get the exact line-up of image and text that you want.

Digmen1

1:16 am on Jun 14, 2009 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks Tedster, I am nearly there, but the image now displays to the right but below the text. I want it on the same height as the text.

This is my html now

<div id="mydiv">
<h1 This is my text</h1>
<img src="images/nzflag.jpg" style="float:right;"/>
</div>

Any suggestions ?

tedster

2:29 am on Jun 14, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try putting the img element before the text in the source code:

<div id="mydiv">
<img src="images/nzflag.jpg" style="float:right;"/>
<h1>This is my text</h1>
</div>

or maybe even

<div id="mydiv">
<h1><img src="images/nzflag.jpg" style="float:right;"/>
This is my text</h1>
</div>

Digmen1

2:50 am on Jun 14, 2009 (gmt 0)

10+ Year Member Top Contributors Of The Month



Great Tedster

The first option worked perfectly !

(I just need to make some little margin adjustments now)