<alt>descriptive text goes here</alt>

An issue and a fix

Firefox 2.0.0.8 breaks some of the layouts. It breaks on the 3 column versions that use negative margins that are the same size or bigger that the element it is on. It looks like there have been at least 3 bugs raised in the Mozilla bug tracker for this issue and it is being actively worked on. The main one is here: https://bugzilla.mozilla.org/show_bug.cgi?id=400406

One solution would be to inject dynamic content after the container using the :after pseudo-element

container:after{
    content: ".";
    height: 0;
    clear: both;
    visibility: hidden;
    display: block;
}

This seems to fix the issue but is not as clean. I have only done some quick tests with this and have not looked at it in Safari.

Update: I knew there was a name for this! It is called the clearfix method.

Liquid Spaced Out Columns

In the previous Space Out Columns post I promised to follow up with some info on liquid layouts, so here we go: Read more…

Spaced Out Columns

In the comments for my A List Apart article, Fredrik Frodlund mentioned he was “not sure it would work if you use blocks that have white space between them”. There actually was a demonstration of this in the three column example with the nested two column layout. I only quickly commented on it, so I thought I would expand on it here. Read more…