[nick2price]

Hi guys, trying to recreate the following (think you need to click on image to see full size). The first 3 logos on the left is one image. You then have the text "share", with the individual, clickable social icons. Finally there is more text, and one image for the credit card images.

So I have started, and done

<div>
    <img src="http://www.test.com/images/specLogos.png" alt="logos" />
</div>

So, that displays the first 3 logos where I want it. Now I need to do the text and the social icons. Do I just add it straight in? e.g.

<div>
    <img src="http://www.test.com/images/specLogos.png" alt="logos" />
    <p>Share</p>
    <a href="#"><img src="http://www.test.com/images/facebook.png" alt="facebook" /></a>
</div>

Or do I need to use some css to do a float left or something?

Cheers
Nick

[Astalor]

Hello there!

After taking a quick look at what you were after I thought it better to mock up some quick code for you to take a look at rather than trying to explain it for you if you're unsure of what everything is.

<style>
	#social img
	{
		/* Float all the images to the left, they'll stack. */
		float: left;
		
		/* Give each image a little right-margin to keep them apart. */
		margin-right: 5px;
	}
	
	#social div
	{
		/* Float the text to the right. */
		float: right;
		
		/* Push the text down from the top to make it vertically centered. */
		margin-top: 6px;
	}
	
	#social
	{
		/* Keeps the div from filling the entire parent element. */
		width: 380px;
		
		/* Just for completion sake. */
		height: 32px;
	}
</style>

<div id="social">
	<img src="http://placekitten.com/32/32"/>
	<img src="http://placekitten.com/32/32"/>
	<img src="http://placekitten.com/32/32"/>
	<img src="http://placekitten.com/32/32"/>
	<div>Hey look, some shiny social buttons!</div>
</div>

If you take a look at that and use it as reference, that is the way I would most likely use to achieve what you are after.