I've come up with a little problem... here's a link to CodePen which will show you what I'm dealing with at the moment.
As you can see, the 4th red box shifts up and under the 3rd one, creating an unintended effect.
Now if you reduce the width of class .block to 920px, the first 6 li's will align perfectly regardless the height of the content, but this is not how I want to deal with this problem.
Now I recall seeing a little CSS snippet that dealt with a similar problem which (most probably) had undefined width in the parent element and variable heights of the child elements. I looked for this snippet (which I thought was here) but couldn't find it.
If anyone out there has a solution for this, I'd be really glad :D
Hello :)
I've come up with a little problem... here's a link to CodePen which will show you what I'm dealing with at the moment.
As you can see, the 4th red box shifts up and under the 3rd one, creating an unintended effect. Now if you reduce the width of class .block to 920px, the first 6 li's will align perfectly regardless the height of the content, but this is not how I want to deal with this problem.
Now I recall seeing a little CSS snippet that dealt with a similar problem which (most probably) had undefined width in the parent element and variable heights of the child elements. I looked for this snippet (which I thought was here) but couldn't find it.
If anyone out there has a solution for this, I'd be really glad :D
Thanks.
@DriftingSteps, don't float, use
display: inline-blockhttp://codepen.io/ChrisPlz/pen/nfiAD
Is that what you were looking for?
Wow, this is exactly what I was looking for:D Thank a lot @ChrisP, much appreciated!