By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,879 Members | 1,859 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,879 IT Pros & Developers. It's quick & easy.

Floated div problem

P: n/a
Can anyone see what's wrong with this page:
http://www.simpleservicesonline.co.u...?CategoryID=1? The
first image on the second row budges one to the right leaving a space,
whereas, using the same ASP code to generate the html on all the other
pages works fine and gives me three images per row.

http://www.simpleservicesonline.co.u...p?CategoryID=2
http://www.simpleservicesonline.co.u...p?CategoryID=3 etc

It's starting to drive me mad, so any help would be appreciated (and a
relief)

:)

Mike

Jan 15 '07 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On 2007-01-15, Mike <pa*******@hotmail.comwrote:
Can anyone see what's wrong with this page:
http://www.simpleservicesonline.co.u...?CategoryID=1? The
first image on the second row budges one to the right leaving a space,
whereas, using the same ASP code to generate the html on all the other
pages works fine and gives me three images per row.

http://www.simpleservicesonline.co.u...p?CategoryID=2
http://www.simpleservicesonline.co.u...p?CategoryID=3 etc

It's starting to drive me mad, so any help would be appreciated (and a
relief)
The problem is not all your images are the same heights, in particular
the first one is 123px high, more than most of the others which are
122px.

The first image on the second row can't go all the way to the left,
because the bottom edge of the very first image is hanging down a couple
of pixels.

If a left float doesn't fit to the right of all the other left floats,
it goes down by just enough to allow it to fit to the right of
something-- which might be another float rather than the left of the
container. This has been described as floats "catching" or "snagging" on
each other. If you want to see the effect, exaggerate the differences in
height and it should be clear what's going on.

$ identify mem*.jpg

mem2pp1.jpg JPEG 100x123 DirectClass 33kb
mem2pp2.jpg[1] JPEG 101x122 DirectClass 34kb
mem2pp3.jpg[2] JPEG 101x122 DirectClass 35kb
mem2pp4.jpg[3] JPEG 101x122 DirectClass 33kb
mem2pp5.jpg[4] JPEG 101x122 DirectClass 32kb
mem2pp6.jpg[5] JPEG 101x122 DirectClass 34kb
mem2pp7.jpg[6] JPEG 101x122 DirectClass 32kb
mem2pp8.jpg[7] JPEG 101x122 DirectClass 31kb
mem2pp9.jpg[8] JPEG 101x121 DirectClass 35kb

You could add a height: 123px to your .temp selector, so each float is
the same height, which may be slightly taller than the image inside it,
or process the images themselves to make sure they are all the same
height.
Jan 15 '07 #2

P: n/a

Ben C wrote:
On 2007-01-15, Mike <pa*******@hotmail.comwrote:
Can anyone see what's wrong with this page:
http://www.simpleservicesonline.co.u...?CategoryID=1? The
first image on the second row budges one to the right leaving a space,
whereas, using the same ASP code to generate the html on all the other
pages works fine and gives me three images per row.

http://www.simpleservicesonline.co.u...p?CategoryID=2
http://www.simpleservicesonline.co.u...p?CategoryID=3 etc

It's starting to drive me mad, so any help would be appreciated (and a
relief)

The problem is not all your images are the same heights, in particular
the first one is 123px high, more than most of the others which are
122px.

The first image on the second row can't go all the way to the left,
because the bottom edge of the very first image is hanging down a couple
of pixels.

If a left float doesn't fit to the right of all the other left floats,
it goes down by just enough to allow it to fit to the right of
something-- which might be another float rather than the left of the
container. This has been described as floats "catching" or "snagging" on
each other. If you want to see the effect, exaggerate the differences in
height and it should be clear what's going on.

$ identify mem*.jpg

mem2pp1.jpg JPEG 100x123 DirectClass 33kb
mem2pp2.jpg[1] JPEG 101x122 DirectClass 34kb
mem2pp3.jpg[2] JPEG 101x122 DirectClass 35kb
mem2pp4.jpg[3] JPEG 101x122 DirectClass 33kb
mem2pp5.jpg[4] JPEG 101x122 DirectClass 32kb
mem2pp6.jpg[5] JPEG 101x122 DirectClass 34kb
mem2pp7.jpg[6] JPEG 101x122 DirectClass 32kb
mem2pp8.jpg[7] JPEG 101x122 DirectClass 31kb
mem2pp9.jpg[8] JPEG 101x121 DirectClass 35kb

You could add a height: 123px to your .temp selector, so each float is
the same height, which may be slightly taller than the image inside it,
or process the images themselves to make sure they are all the same
height.
Thanks Ben - I never thought to look at the height of the images.
They come from another source, which I thought I had some control over
(in that I asked for them to be identical dimensions). Given that my
request obviously was ignored (or not understood), I have set a height
for the selector as you suggested. Works as I want now.

Jan 15 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.