CharlyAnderson CharlyAnderson - 1 year ago 73
Sass (Sass) Question

Not all list items floating correctly

I am working on a gallery grid (first block of 6 images) and I cannot for the life of me seeing why not all list items are displaying properly. It mostly displays correctly, however, if you downscale the browser, at about 700px, the items start flicking and not displaying as they should.

I usually use a right padding of 10px for my gallery items, as this didn't work on this occasion I have tried a right border of 10px but still the problem persists.

Can anyone see what the problem is? Live url is here.

Code is:

.feature {

ul {
list-style-type: none;
margin: 0 -10px 30px 0;
padding: 0 !important;

li {
border-right: 10px solid #ffffff;
margin-bottom: 10px;
position: relative;
float: left;
width: 33.33%;

img {
width: 100%;

.inner {
position: absolute;
padding: 20px;
top: 0;
left: 0;
height: 100%;
width: 100%;

Answer Source

The reason is the (original) width/height ratio of your images: They are all 500x333px, but the third one is 600x400, which makes its automatic height slightly bigger than it is in all other instances. And therefore the 5th li element doesn't float under the third one (when only two fit in a row), but next to it, because the third is about 1px higher than the fourth one.

The easiest solution would be to change the original size of the fourth image to 500x333

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download