crossing edges…

…or having a hangover

If you have surfed by this site a time or two, you may have noticed elements crossing borders and container edges here and there. Mainly decorative images are positioned as “hangovers”, often associated with headlines as is the case for the “surfer” image above.

I like “hangovers” a lot – in web design that is, and often have to hold back not to overdo the use of them. There is a system of sort in how I use, and do not use, “hangovers” across this site, but deviations from the system can be found here, there, and everywhere. No rules without exceptions.

Of course, on really small screens there aren't all that many edges to cross. Thus, this is a technique best suited for larger screens and wide browser windows.

freedom of expression

On one hand, moving elements over the edges makes them stand out, and on the other hand it frees up space for text in main areas. Both these factors are taken into considerations when adding classes for position, spacing, and size.

Each and every “hangover” element is designed in place using microtuning, as default (basic) styling for all elements is to keep them nicely within their respective containers.

The “actual vs. visual” order of elements is separated with this technique, and visual arrangement can be tailored to my liking without messing up logical source‐code (HTML) order.

Source‐code order is important, as an image's alt attribute text will be read in source order sequence with surrounding text by Assistive Technologies (AT) software. Web pages that don't make much sense without images, rarely ever make much sense with images either, in my very personal opinion.

That most images on my site have empty alt attributes – they are either decorative or they are described well enough in regular text, is totally irrelevant when developing techniques that should work in all cases.

minor considerations

Containers controlled by overflow: auto/hidden will clip “hangovers” at the edges. So that method for containing floats is no good here. It never was any good anywhere anyway, except for the odd cases when/​where controlling overflow really is part of design conside­rations, but be that as it may for now.

The often overlooked fact that floats contain floats, provides us with one solution. The simple clear: both on regular elements or in ClearFix form, will always work too. So, given the many well‐working alternatives for containing floats, the fact that “hangovers” don't want to be “contained” in the regular meaning of the word, isn't a problem.

I have been playing with “hangovers”, and other element manipulation in web design, for so long that it is second nature by now. Not many edge‐cases left in web design, really.

About time the W3C, and browsers, gave us web designers some new CSS toys to play with. Preferably some that don't belong in the regular package of transitional effects.

sincerely  georg; sign

Hageland 09.mar.2014
12.mar.2014 - added some whiskey.
last rev: 12.mar.2014 advice upgrade advice upgrade navigation