Hi, I have a display issue on my page here: http://www.rawfeddogs.org/adoptions/k9facebook_adopt_app.html
The photos are supposed to all be on the left and as a block, not as it is currently displaying (in both IE and Firefox) with 5 on the top row, then 3, then 2 then 1 !!
I just know the answer to this is going to be simple, but I can’t figure it out!! muhwaaah!!
Please can someone help me?
Many thanks in advance
Michelle
Those divs are not all the same height, so some are snagging on others as they try to float left. Rather than float: left, set them all to display: inline-block:
div {
display: inline-block;
vertical-align: top;
}
Also, all those divs can be styled with the one same rule. Don’t use inline styles, as they are inefficient. Now you have to go and change each one, instead of just setting the rule in one place. 
Hi! Mox2005, your problem should be fixed by simply set all with same height and width for the images so it will be align with no problem…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dogs for Adoption</title>
</head>
<body>
<p><b>Dogs in Need of Adoption and Sponsorship:</b></p>
<div style="float: left; width: 251px">
<p>
<a target="main" href="https://www.facebook.com/media/set/?set=a.354499997983558.1073741855.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/aaron.jpg" width="251" height="190" style="border-width: 0px" /><br />
Aaron</a></p>
</div>
<div style="float: left; width: 251px">
<p>
<a target="main" href="https://www.facebook.com/media/set/?set=a.388374317929459.1073741907.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/basil.jpg" width="251" height="190" style="border-width: 0px" /><br />Basil</a></p>
</div>
<div style="float: left; width: 251px">
<p>
<a target="main" href="https://www.facebook.com/media/set/?set=a.361190717314486.1073741869.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/hng.jpg" width="251" height="190" style="border-width: 0px" /><br />Hansel
& Gretel</a></p>
</div>
<div style="float: left; width: 251px">
<p>
<a target="main" href="https://www.facebook.com/media/set/?set=a.356904767743081.1073741858.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/joshua.jpg" width="251" height="190" style="border-width: 0px" /><br />Joshua</a></p>
</div>
<div style="float: left; width: 251px">
<p><a target="main" href="https://www.facebook.com/media/set/?set=a.360667084033516.1073741868.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/lori.jpg" width="251" height="190" style="border-width: 0px" /><br />Lori</a></p>
</div>
<div style="float: left; width: 251px">
<p>
<a target="main" href="https://www.facebook.com/media/set/?set=a.385294344904123.1073741902.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/marta.jpg" width="251" height="190" style="border-width: 0px" /><br />Marta and her Pups</a></p>
</div>
<div style="float: left; width: 251px">
<p>
<a target="main" href="https://www.facebook.com/media/set/?set=a.357085937724964.1073741859.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/pnd.jpg" width="251" height="190" style="border-width: 0px" /><br />Peggy & Dolly</a></p>
</div>
<div style="float: left; width: 251px; ">
<p>
<a target="main" href="https://www.facebook.com/media/set/?set=a.363780527055505.1073741877.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/ricky.jpg" width="251" height="190" style="border-width: 0px" /><br />Ricky</a></p>
</div>
<div style="float: left; width: 251px">
<p>
<a target="main" href="https://www.facebook.com/media/set/?set=a.387107138056177.1073741905.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/rnl.jpg" width="248" height="187" style="border-width: 0px" /><br />Raya & Lucky</a></p>
</div>
<div style="float: left; width: 251px">
<p>
<a target="main" href="https://www.facebook.com/media/set/?set=a.374307386002819.1073741888.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/roshi.jpg" width="251" height="190" style="border-width: 0px" /><br />Roshi</a></p>
</div>
<div style="float: left; width: 251px">
<p>
<a target="main" href="https://www.facebook.com/media/set/?set=a.389370191163205.1073741909.135827796517447&type=3">
<img src="http://www.rawfeddogs.org/adoptions/tyra.jpg" width="251" height="190" style="border-width: 0px" /><br />Tyra</a></p>
</div>
</body>
</html>
Setting heights is fine as long as you are are sure it will never be exceeded. However what happens if a caption wraps (either when you have more text or the user resizes the text in the browser) and then you are back to square one
<p> <a target="main" href="https://www.facebook.com/media/set/?set=a.361190717314486.1073741869.135827796517447&type=3"> <img src="http://www.rawfeddogs.org/adoptions/hng.jpg" width="251" height="190" style="border-width: 0px" /><br />
Hansel & Gretel playing together in the yard</a></p>
Using inline-block instead of float as Ralph suggests will avoid this issue altogether.
Support for IE7 and under can be added quite simply (if needed).
div {
display: inline-block;
vertical-align: top;
*display:inline;/* ie7 hack for inline-block */
zoom:1.0;/* ie7 hack for inline-block */
}