treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Help needed with CSS alignment on Chrome!

  • getting this weird alignment problem with the thumbnails on the home page of the following website: http://colour-chair.de It looks perfect on firefox. Could someone lease help me out with this?

  • Odd...If you remove

       margin-top:100px !important; 
    

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

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

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

    Can't think why...but......

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

    .gallery-item {
    display: inline-block;
    }
    

    seems to fix it for me

  • 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?

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

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

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

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