PDA

Click to See Complete Forum and Search --> : How do I stack images vertically then align horizontally using <div> tags.

KnoxVol
11-04-2007, 07:12 PM
Hello;

The code below seems to be doing exactly the way I want. The problem is I don't see how it could be working.

I am using a variation of the CSS code that I found at the W3Schools web site.
http://www.w3schools.com/css/css_image_gallery.asp
http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery

I am trying to get three images below (flower1.gif, flower2.gif, flower3.gif) to line up vertically or stack on top of each other, which they are doing.

Then I am wanting to get the next three images (flower4.gif, flower5.gif, flower6.gif) to stack on top of each other and line up immediately to the right of the first three images, which they are also doing.

It looks like since the three images in each the img1 class and the img2 class are stacking on top of each other that the two groupings of images in the img1 and img2 div tags would also stack on top of each other. But they're not. They're lining horizontally just like I need them to.

The code seems to be working fine in both the FireFox and IE browsers.

You can copy the code below, save it as an Html file, then open it in a FireFox browser or IE browser and you can see what I'm talking about.

But I'm trying to get it clear for my own peace of mind that I've got the image configuration below designed properly and that I've not got the CSS code hacked up.

I would appreciate if anyone could tell me if the method below is proper or provide any input or suggestions about any better way of resolving my issue.



<html>
<head>
<style type="text/css">
div.img1
{
margin: 0px 0px 0px 0px;
border: 0px solid #A9A9A9;
float: left;
}
div.img2
{
margin: 0px 0px 0px 6px;
border: 0px solid #A9A9A9;
float: left;
}
</style>
</head>
<body>

<table>
<tr>
<td>col one</td>
<td>col two</td>
<td>


<div class="img1">
<div> <a href=""><img src="flower1.gif" width="110" height="90"></a></div>
<div> <a href=""><img src="flower2.gif" width="70" height="60"></a> </div>
<div> <a href=""><img src="flower3.gif" width="110" height="90"></a></div>
</div>

<div class="img2">
<div ><a href=""><img src="flower4.gif" width="110" height="90"></a></div>
<div><a href=""><img src="flower5.gif" width="110" height="90"></a></div>
<div><a href=""><img src="flower6.gif" width="110" height="90"></a></div>
</div>

</td>
</tr>
</table>
</body>
</html>



Thanks.
scragar
11-04-2007, 07:29 PM
the container divs are floated, so they appear in their intended locations with a floated behaviour, that is to say:

they react like block elements(hight, width background etc react like block elements)
they automaticly move to the side of the element they are assigned to(WITHOUT breaking the box model)
other elements appear alongside as if the element was padding or the edge of their container, not below as with normal block elements.

there are more strange things floats do, but that's the basics, if you want more information google "float css".
Centauri
11-04-2007, 08:33 PM
You don't need all those divs surrounding each image, though - the images can be converted to block display with a line of css :
<div class="img1">
<a href=""><img src="flower1.gif" width="110" height="90"></a>
<a href=""><img src="flower2.gif" width="70" height="60"></a>
<a href=""><img src="flower3.gif" width="110" height="90"></a>
</div>

<div class="img2">
<a href=""><img src="flower4.gif" width="110" height="90"></a>
<a href=""><img src="flower5.gif" width="110" height="90"></a>
<a href=""><img src="flower6.gif" width="110" height="90"></a>
</div>
.img1 img, .img2 img {
display: block;
}
KnoxVol
11-04-2007, 08:46 PM
scragar, Centauri,

Thanks for responding to my problem. I appreciate the information.
thechasboi
11-05-2007, 09:29 AM
KnoxVol

One thing I learned about using floats in divs and spans is that if you want to get a second line what you need to do is add a clear:both to the second div or the img2 class. This will ensure a second line is created. And on another note you can use divs around the images if you like it makes no difference. I would personally put the there so that I can use a float on each on and a width as well so I can margin them apart on left, top and such. Make sure your doctype is a corrrect one and does not make the browser go into quirks mode.
Centauri
11-05-2007, 09:43 AM
And on another note you can use divs around the images if you like it makes no difference. I would personally put the there so that I can use a float on each on and a width as well so I can margin them apart on left, top and such.

Any styles that can be applied to a div can also be applied direct to the images, making the divs unnecessary. Divs should be used to logically group associated content - one element within a div is pointless.
thechasboi
11-05-2007, 10:30 AM
Centauri

You are technically correct in this fact that you can use inline or classes on IMG tags the same as divs but I have found out that certain tricks you would like to do may not work the same on img, span, or other tags only DIVs work in that sort of manner. What you may ask, I have tried to line things up with height, width, margins, float, clear, and paddings all in manner that makes divs work differently than spans even if you add the same styles to a span. I do not want to turn this post into a debate but wanted to mention these facts. If you would like to see an example I can send you to a site which has the styling mentioned. Send me a private message.
Centauri
11-05-2007, 04:12 PM
To use your example of a span, simply the application of display:block will make it behave exactly like a div, as block display will do to most other elements.