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

Help needed with CSS alignment on Chrome!

  • # March 8, 2013 at 7:17 am

    getting this weird alignment problem with the thumbnails on the home page of the following website:
    It looks perfect on firefox. Could someone lease help me out with this?

    # March 8, 2013 at 7:39 am

    Odd…If you remove

    margin-top:100px !important;

    from [.home . gallery] they line up but, of course, the whole page moves up,

    # March 8, 2013 at 7:42 am

    If i open the element inspector and remove `float: left;` from gallery items, then put it back, they also line up. Madness!

    # March 8, 2013 at 7:49 am

    Could it have something to do with the style section inside the page rather than in a stylesheet?

    Can’t think why…but……

    # March 8, 2013 at 7:50 am

    changing the float:left to display:inline-block to

    .gallery-item {
    display: inline-block;

    seems to fix it for me

    # March 8, 2013 at 7:51 am

    >changing the float:left to display:inline-block to gallery-item { display: inline-block; } seems to fix it for me

    That’s probably doing the same as removing and reapplying the float.

    Block Formatting Context issue?

    # March 8, 2013 at 7:54 am

    If I set a height on the parent div of gallery items (any height works), they line up. If I remove the height, they bug again. My mind is puzzled. Not an expert on BFC so idk…

    # March 8, 2013 at 7:56 am

    I don’t know why but removing `clear: both;` from `.gallery` (line 505 of style.css) seems to fix it.

    # March 8, 2013 at 7:58 am

    I’m pretty sure it’s because of the style element in the body – put it in the head without any other changes and it works.

    # March 8, 2013 at 9:09 am

    Some of the solutions presented above seem to work (although they don’t make a lot of sense and I am surprised that such a thing is happening on Chrome) .
    Testing if anything is broken in other browsers after making the changes. Will post an update.
    Big thanks to whoever helped.

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

You must be logged in to reply to this topic.