Treehouse: Grow your CSS skills. Land your dream job.

Float craziness

  • # May 9, 2012 at 3:00 pm


    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.

    # May 9, 2012 at 3:07 pm

    Here is the css. Parent element is 100%

    .thumb {
    float: left;
    margin: 10px 0;
    width: 33.33%;
    # May 9, 2012 at 3:10 pm

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

    # May 9, 2012 at 3:14 pm

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

    # May 9, 2012 at 3:28 pm

    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

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

    # May 9, 2012 at 3:49 pm

    @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.

    # May 9, 2012 at 4:10 pm

    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.

    # May 9, 2012 at 4:14 pm

    Thanks a lot, I really appreciate it. Cheers!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.