[RESOLVED] Aligning images

[buzzfever]

Hey, I'm trying to get some images to line up as in this picture(in the attachment). I don't know how to do it using a table (can't get image E to not line up with the top of image F) and I'm assuming there's a better way to do it in CSS. I tried this:

<img src="index/Case Pic.jpg" width="480" height="318" alt="Treat Case" />
<div style="position:relative; left:-167px; top:15px">
<a href="dwyd.html">
<img src="index/DWYD Icon.jpg" width="147" height="195" alt="Dine With Your Dog" /></a>
</div>
<div style="position:relative; left:0px; top:-210px">
<a href="seasonal_soon.html">
<img src="index/whats cooking.jpg" width="147" height="237" alt="What's Cooking" /></a>
</div>
<div style="position:relative; right:-167px; top:-450px">
<a href="happening_at_bakery.html">
<img src="index/happening at bakery.jpg" width="147" height="267" alt="Happening at the Bakery" /></a>
</div>
<div style="position:relative; left:-167px; top:-485px">
<a href="ice_cream_social.html">
<img src="index/ice cream social.jpg" width="147" height="225" alt="Ice Cream Social"/></a>
</div>
<div style="position:relative; left:0px; top:-700px">
<a href="dog_of_the_year_winners.html">
<img src="index/doy.jpg" width="147" height="172" alt="Betty - Dog of the Year"/></a>
</div>

It worked, but then there was just a ton of line breaks after the images - due to using the <div> tags.

Thanks.

[WebJoel]

A little bit of 'div-itis' but it's a reasonable first try! :) It becomes easier when you establish the 'size' of a all-encompassing container, let's call it "parent" and you 'float' the image 'children' images therein. brb..

back:

-Not quite the image-arrangement that you have, but this can be moved around, etc. The "float:left;" does exactly that, and the 'ice width' of the parent container DIV prevents the 'wrapped' image from displaying horizontally to it's previous sibling, so it 'drops' to the next upper-left space available.<div style="width:310px; height:auto; border:3px double green; overflow:hidden; padding-top:5px; padding-bottom:5px;">

<img alt="one" src="#" style="width:300px; height:100px; background-color:sienna; margin:5px; margin-top:0; float:left;" />
<img alt="two" src="#" style="width:96px; height:100px; background-color:wheat; margin:5px; margin-top:0; float:left;" />
<img alt="three" src="#" style="width:96px; height:100px; background-color:teal; margin:5px; margin-top:0; margin-left:0; float:left;" />
<img alt="four" src="#" style="width:96px; height:100px; background-color:gray; margin:5px; margin-top:0; margin-left:0; float:left;" />

<img alt="five" src="#" style="width:96px; height:193px; background-color:silver; margin:5px; margin-top:0; margin-left:5px; float:left;" />
<img alt="six" src="#" style="width:195px; height:93px; background-color:yellow; margin:5px; margin-top:0; margin-left:0; float:left;" />
<img alt="seven" src="#" style="width:195px; height:93px; background-color:goldenrod; margin:5px; margin-top:0; margin-left:0; float:left;" />
</div> Some play with image sizes and padding and such, and this could be a better solution. Looks the same for Fx and IE.

?'s, -do ask! :)

[buzzfever]

Lovely. Thanks so much. Just in case anyone wants to know how I moved those images up here is what worked in the end (looks great in IE, Fx, Opera, Safari):

<img src="index/Case Pic.jpg" width="480" height="318" alt="Treat Case" />

<div style="width:500px; height:auto; overflow:hidden; padding-top:10px; padding-left:15px">
<a href="dwyd.html">
<img src="index/DWYD Icon.jpg" style="width:147px; height:195px; margin:5px; float:left" alt="Dine With Your Dog" /></a>
<a href="seasonal_soon.html">
<img src="index/whats cooking.jpg" style="width:147px; height:237px; margin-top:5px; margin-left:15px; margin-right:15px; float:left" alt="What's Cooking" /></a>
<a href="happening_at_bakery.html">
<img src="index/happening at bakery.jpg" style="width:147px; height:267px; margin:5px; float:left" alt="Happening at the Bakery" /></a>
<a href="ice_cream_social.html">
<img src="index/ice cream social.jpg" style="width:147px; height:198px; position:relative; top:-70px; margin:5px; float:left" alt="Ice Cream Social"/></a>
<a href="dog_of_the_year_winners.html">
<img src="index/doy.jpg" style="width:147px; height:172px; position:relative; top:-30px; margin-top:5px; margin-left:15px; margin-right:15px; float:left" alt="Betty - Dog of the Year"/></a>
</div>

You can see the results here: http://threedogbakerywest.com/

Thanks again!

[WebJoel]

Nice. :)