Trying out new clearfix method with generated pseudo elements. Each box has a clearfix, should they not line up underneath each other instead of floating like usual?
What is it you're trying to achieve? Divs by default are block level and would fall beneath one another naturally. Then you've set them to display: table which would do the same thing but change other characteristics. But that doesn't matter because you've then overridden that with the floats. And now you want each float to clear the previous... why bother?
Do you understand what the clearfix method is for? It seems like you're using it where a simple clear: left (or clear: both) would suffice. At any rate the reason things aren't working as you would like is that the psuedo elements are children of the element and therefor are in a different layout context than the floating boxes.
The clearfix method is for clearing floated elements - as in if you have a container div with child divs inside that are floated, the container will actually collapse with the child divs displaying outside of it. That's when a clearfix is used, to extend the container to fit the child divs inside.
With regard to what you want to do, what you need is to set the boxes as {display: block; clear: both;} and then they will stack on top of one another.
http://johandahl.com/wp/portfolio/
Whats wrong?
Do you understand what the clearfix method is for? It seems like you're using it where a simple clear: left (or clear: both) would suffice. At any rate the reason things aren't working as you would like is that the psuedo elements are children of the element and therefor are in a different layout context than the floating boxes.
The clearfix method is for clearing floated elements - as in if you have a container div with child divs inside that are floated, the container will actually collapse with the child divs displaying outside of it. That's when a clearfix is used, to extend the container to fit the child divs inside.
With regard to what you want to do, what you need is to set the boxes as {display: block; clear: both;} and then they will stack on top of one another.
Regarding the display:table, that was to vertically align the text on the boxes.
Thanks for clearing this up for me.