One of the most common mistakes I do while coding CSS is letting my headers (h1, h2 and the like) literally ’spill’ when too long. Lemme conjure a quick example:
Here we have a quite common case where the header (and maybe some header meta) is shown next to an avatar, gravatar, image anyway. The image is floated left, added a 10px margin, and the h1 and h2 tags are just to 0 margin, padding (except for the 5px top margin of h2).
The demo looks cool and nice because the title is short enough, and everything is right up in the skies.
Let’s observe what happens when the title gets a bit too long for comfort:
Tada! Spill. Why did that happen?
Because I floated the image and relied on that, without giving some padding to the block-level headings, which of course, will continue to spill flush left when the image is no longer there. Which can be the result you want sometimes, but I don’t think that’s the case when using this effect for headlines.
So a simple padding-left: 60px in both h1 and h2…
…will do the trick.
No spill!
3 comments on this post
Svelon #1
16.Jan.09
That was useful, thanx
Only one question. What do you do when you don’t have an image with fixed width?
Sugar #2
16.Jan.09
@Svelon
Then I guess you would have to rely on a simple table, 1 row x 2 columns, one to hold the image and the other to hold the text, to get the most cross-browser compliant solution.
I can’t think of any other solution which is flexible enough now.
theportraitofageek.com» Blog Archive » It’s all about paddings and margins and stuff #316.Jan.09
[...] ένα πολύ ενδιαφέρον quick tip στο blog της Ζαχαρένιας που πριν διαβάσετε παρακάτω καλό είναι να ρίξετε μια [...]