...

View Full Version : Getting image icons on same line



nick2price
06-12-2012, 10:34 PM
Hi, I am trying to get a load of small images and icons inline. At this moment in time, they are more spread over 2 lines. There is room to fit them all in if padding is removed, but I am not sure how to get this done. The html is

<div id="icons">
<img src="http://www.test.com/wp-content/themes/reponsive/images/specLogos.png" />
Share
<img src="http://www.test.com/wp-content/themes/reponsive/images/social1.png" />
<img src="http://www.test.com/wp-content/themes/reponsive/images/social2.png" />
<img src="http://www.test.com/wp-content/themes/reponsive/images/social3.png" />
<img src="http://www.test.com/wp-content/themes/reponsive/images/social4.png" />
<img src="http://www.test.com/wp-content/themes/reponsive/images/social5.png" />
<img src="http://www.test.com/wp-content/themes/reponsive/images/social6.png" />
All major cards accepted
<img src="http://www.test.com/wp-content/themes/reponsive/images/cards.png" />
</div>

The css for this div is not much at the moment

#icons{
margin:0px;
}

I was hoping it would just flow, which it has, but it goes onto a second line. I also tried having everything in a list, but this didnt work either. Any advise appreciated.

Nick

aaronhockey_09
06-13-2012, 12:17 AM
try something like


#icons img { margin:0; padding:0; float:left; }

bundled
06-13-2012, 12:26 AM
#icons {
position:absolute;
left:XXX;
top:XXX;
margin:0;
width:XXX;
height:XXX;
float: left;
}

Could use absolute positioning.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum