CSS float problem

[gregjorss]

Having an issue at http://www.upsidecreative.com.au

All the thumbnails float left, and the small thumbnails are inside a small thumbnail holder (called “badass-holder”). The problem is, if you look at the above site and resize your screen, it breaks and gives some really weird floating.

You can see what I mean at this screenshot also http://upsidecreative.com.au/float1.jpg

Any ideas?

[Atelierbram]

I like the way this image-gallery is responsive with using viewport-units, works well I think. Don’t know exactly if this is what you mean, but anyway; when the h4.year should always stick to the most left-side, then it makes sense to clear everything that came before.

h4.year {
  /* stuff */
  clear: left;
}

Alternatively, one could use nth-child selectors in mediaqueries, to clear floats after “a certain number of elements“.

[gregjorss]

Yes, VWs are the future of responsive design in my opinion

That’s not exactly the problem, I want to have the year boxes just float as part of the grid, not to the left of screen.

[Atelierbram]

Does the layout break at the same point every time(, like at the start of the image wrapper “badass-holder“)?

[gregjorss]

no. i think the problem might be chrome doesnt like treating the h4 like a div

[Author]

Posts