Aligning images with text

HTML & CSS
1

On my site I have a load of icons ( .icon )
there is text wrapping around them and I want the images to line up nicely. They are all 85x85px - however the first 3 line up ok but the other 4 don’t.
How do I get over this problem without seting them individually

see them on my homepage - - - http://organicwebdesigns.co.uk

2

I looked at your bottom 4 icon/text combinations with Firebug. They are set up a little unusual…

Experiment with putting each icon/text combo in it’s own div and setting first the <img> as vertical-align:top; - if that don’t work, try the same setting on <p>

3

They all look the same to me*. They all have a 20px margin all the way around, so play with that if you want them aligned with the text at the top:

.icon {
float: left;
height: 85px;
width: 85px;
background: url(images/wp_icon_s1.png) no-repeat;
webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
border: 2px white;
[COLOR="#FF0000"]margin: 20px;[/COLOR]
}
  • Some have empty space in them, like the ebay one, so even if they align at the top, it may not look like they do, so be aware of that.
4

hantaah,

A couple or three recommendations:

(1) On your html page, you are missing some <p> and </p> tags in the “Additional Services” section. Once those are filled in, the page will validate and all of the icons will be uniformly out of place. Uniformly is important.

(2) Make one change to your css in the area suggested by Ralph:

style-Smooth-Blue.css Line 313:


.icon {
    background: url("images/wp_icon_s1.png") no-repeat scroll 0 0 transparent;
    border: 2px none white;
    border-radius: 20px 20px 20px 20px;
    float: left;
    height: 85px;
   [COLOR="#0000FF"] margin: 7px 20px 20px;[/COLOR]    /* was:  margin:20px */
    width: 85px;
}

(3) On your html page, you have used <p> </p> several times in the “Additional Services” section to provide vertical spacing between the icons and their text. Therefore, you might consider deleting one of the “rows” of <p> </p> used in the “Additional Services” section to make the vertical of spacing about the same as in the “WordPress & Management” section. Tested in FF.

PS: I’m sure you realize that throwing in <p> tags as vertical spacers isn’t a very strong technique. Margins and/or padding applied to their containers would give you more control over positioning independently of paragraph properties.