/    Sign up×
Community /Pin to ProfileBookmark

How do I stack images vertically then align horizontally using <div> tags.

Copy linkTweet thisAlerts:
Nov 05.2007

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.
[url]http://www.w3schools.com/css/css_image_gallery.asp[/url]
[url]http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery[/url]

I am trying to get three images below ([COLOR=”Blue”]flower1.gif[/COLOR], [COLOR=”Blue”]flower2.gif[/COLOR], [COLOR=”Blue”]flower3.gif[/COLOR]) 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 ([COLOR=”Blue”]flower4.gif[/COLOR], [COLOR=”Blue”]flower5.gif[/COLOR], [COLOR=”Blue”]flower6.gif[/COLOR]) 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 [COLOR=”Blue”][B]img1[/B][/COLOR] class and the [COLOR=”Blue”][B]img2[/B][/COLOR] class are stacking on top of each other that the two groupings of images in the [COLOR=”Blue”][B]img1[/B][/COLOR] and [COLOR=”Blue”][B]img2[/B][/COLOR] 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.

[code=php]
<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>

[/code]

Thanks.

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarNov 05.2007 — 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".
Copy linkTweet thisAlerts:
@CentauriNov 05.2007 — You don't need all those divs surrounding each image, though - the images can be converted to block display with a line of css :
[CODE]<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> [/CODE]
[CODE].img1 img, .img2 img {
display: block;
}[/CODE]
Copy linkTweet thisAlerts:
@KnoxVolauthorNov 05.2007 — scragar, Centauri,

Thanks for responding to my problem. I appreciate the information.
Copy linkTweet thisAlerts:
@thechasboiNov 05.2007 — 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.
Copy linkTweet thisAlerts:
@CentauriNov 05.2007 — 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. [/QUOTE]

Any styles that can be applied to a div can also be applied direct to the images, making the divs [B]unnecessary[/B]. Divs should be used to logically group associated content - one element within a div is pointless.
Copy linkTweet thisAlerts:
@thechasboiNov 05.2007 — 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.
Copy linkTweet thisAlerts:
@CentauriNov 05.2007 — 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.
×

Success!

Help @KnoxVol spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...