Aligning small icons next to br'd text

Hi there,

I’m not quite sure if this is the right way to go about it but I have a div which contains some text which is broken up using a <br /> and would like to place some small icons to the right of the text. I have tried using vertical-align on the image which I would normally use if the text wasn’t broken up but that doesn’t seem to be having any effect.

Below is a link to a test page for the code which I’ve also pasted in below.

http://andrewcourtney.co.uk/demoenvironment/imagealign/


		<div style="padding:10px; font-family:Lusitana; text-transform:uppercase; font-size:0.8em; float:left;
background:#522a2a;
color:#faa31b;
text-shadow: black 0.15em 0.15em 0.2em;
border: 1px solid #3d1414; outline: 2px solid #522a2a;">
		Add us for the latest<br />in our news and events<img src="twitter.png" alt="" style="vertical-align:-80%;" /><img src="twitter.png" alt="" style="margin-left:10px; vertical-align:-80%;" /> <img src="twitter.png" alt="" style="margin-left:10px; vertical-align:-80%;" />
		</div>

Any ideas on how best to do this? Maybe some alterations could be made to the width of the text’s area itself so it wraps around with CSS? One solution would be to split the div up I guess?

Cheers,

Shoxt3r

Managed to figure it out since posting. Basically all I’ve done is split the div up by adding spans and applied relative widths to each span and a float which seems to keep it happy.

By all means if there’s a better solution though I’d love to hear it :slight_smile:

Code and updated link below.

http://andrewcourtney.co.uk/demoenvironment/imagealign/



		<div style="padding:10px; font-family:Lusitana; text-transform:uppercase; font-size:0.8em; float:left; 
background:#522a2a;
color:#faa31b;
width:310px;
text-shadow: black 0.15em 0.15em 0.2em;
border: 1px solid #3d1414; outline: 2px solid #522a2a;">
		<span style="width:60.5%; float:left;">Add us for the latest in our news and events</span>
		<span style="width:39.5%; float:right;"><img src="twitter.png" alt="" style="margin-left:11px;" /><img src="twitter.png" alt="" style="margin-left:11px;" /> <img src="twitter.png" alt="" style="margin-left:11px;" /></span>
		</div>


(please excuse the set 310px width on the container div, it’s set as a percentage in the “real” version)