Extensible Development

Introduction

Image 1, Common tag line without any style problems.

Looking at the list of tags at the bottom of my posts, I noticed that when the amount of tags gets bigger, strange things happen to the style. When the text width gets too big to fit next to the category tags, it’s naetly moved down. But when it gets even bigger the text gets clipped. Changing the style so the text fits easily solved that problem.

Image 2, Wide tag line without any style problems.

.post .content .under span {
float:    left;
/* Make the span change height to prevent the text from being clipped. */
height:    auto;
margin-right:    15px;
/* Add padding to the left for the image. */
padding-left:    22px;
}

Image 3, Long tag line with wrong background.

But whoops, what’s with the background image? Using CSS Sprites and fluid/elastic layout doesn’t quite seem to work together…
Im my efforts to make this website’s themes more “elastic” I had to find a solution.

Experiments

I first tried to find CSS properties that could be applied directly to the containing SPAN.
Setting float to ‘none’ and display to ‘inline’ will make the text “hanging”. This actually means that each line will receive it’s own “box” with only the first box having a padding and background.

.post .content .under span {
display:    inline;
float:    none;
height:    auto;
margin-right:    15px;
padding-left:    22px;
}

Image 4, Tag line with hanging text.

Unfortunately not floating is not optional and hanging text is not what we want either.
So… how can I get a floating box with a background that ignores the content and stays 16px high?
What property do floats have that can be used and that’s been a thorn in many eyes?

Solution

Overflow! Floats tend to reach outside the containing box making their parent unaware of their size. (The containing box is actually secretly aware of the float’s size, check this by turning on ‘outline’.)

Image 5, Float overflow.

If we create a containing span and make the content a floating block, then the container can contain the background image and won’t be affected by the content’s size.
The content block used to have a background and padding to show an “icon”, so we start by adding a container.

Image 6, Content block with background.

We can then move the background to the container and lock it’s height.

Image 7, Container with background.

Great, this is what we wanted all along! But there’s one final step left.
Since the container doesn’t “contain” the actual content, but the content flows out, we need one more container around the whole. This outer container can be “floating-content-aware”.

Image 8, Final result.

<span class="outer-container">
    <span class="icon-container">
        <div class="content">Lorem impsum, dolor</div>
    </span>
</span>

.outer-container {
    float:    left;
    height:    auto;
    margin:    0;
    overflow:    auto;
    padding:    0;
}
.icon-container {
    background-image:    url(css-sprite.png);
    background-position:    0 16px;
    background-repeat:    no-repeat;
    float:    none;
    height:    16px;
    margin-right:    15px;
    overflow:    visible;
    padding-left:    22px;
}
.content {
    display:    block;
    float:    left;
    padding:    0;
    margin:    0;
}

Image 9, Tag line with correct style.

Conclusion

A better solution would have been to use clipping on the background image, but that’s not present in CSS 2.1, CSS 3 or Mozilla’s specifications. Mozilla has an isue on this (113577, please vote!), so I’m hoping this will make it to Firefox 3.5. W3C has nothing on it, so I contacted the “CSS 3, Background and Border” WorkGroup. Let’s hope for the best.