Forums

fectio1

Hello,

I cannot seem to figure out why this image is being pushed down. I have test environment set up and it works fine, but when it goes live, this happens and I am using the same browser. Craziness its is! Notice the image being pushed down.

Thanks in advance.

fectio1

Here is the css. Parent element is 100%

.thumb {
    float: left;
    margin: 10px 0;
    width: 33.33%;

dfogge

in order to help you we'll need more info. see the links below. thanks!

http://css-tricks.com/how-to-ask-a-good-question-in-the-forums/
http://css-tricks.com/seriously-just-make-a-jsfiddle/

fectio1

I provided a screen shot and the css, unfortunately, I don't have it live to send you a link.

Schmotty

Give the link to the live site where the problem is occurring and I'll tell you for sure, but it looks like the first image (cityscape) is taller (height) than the other images by 2 or 3 pixels. This makes the second row float over only as far as it can go to the left before hitting the margin of that first image. So that "pushed down" image isn't pushed down, it is floating left correctly but is part of the third row.

Here is a jsfiddle example http://jsfiddle.net/Y72TY/

notice that the first-child div is set to 51px and that makes the "drop"

fectio1

@Schmotty, Thanks for looking at it. Cheers!

*just a side note, I would really need a buffer for the images, because there is no way each one will be the exact same size.

Schmotty

Yes, I was right. Either A) specify the height of the div.thumb (it looks like 300px will work), and your images will adjust to 80% of that. Some will squish, but that squish looks better than what you have now. Or B) put a clear:both div after every 3rd picture.

fectio1

Thanks a lot, I really appreciate it. Cheers!

treehouse : what would you like to learn today?

Forums

[Solved] Float craziness