Float overflow can be useful too

Introduction

Common tag line without any style problems.

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.

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.

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.
Continue reading