aligning elements in responsive designs…

…for perfect line‐up on all screens

I often use visual vertical dividers in text areas, to separate blocks of text. Most such dividers are background images above or below text in paragraphs, inserted with a class .st (SpaceTop) or .sb (SpaceBottom) on the paragraphs they are needed on.

As these dividers are attached to the paragraphs themselves, they will always stay centered in the paragraphs and not adjust horizontally when text is interacting with floats. Line‐up of vertical dividers may then look perfect on some window widths, but they may be completely out of place and/or overlapped by floats on other window widths.

We clearly cannot have such unpredictable line‐ups in our fluid‐responsive designs. A better technique, or rather a larger toolbox, is called for.

In the example below, the dividers do adjust horizontally – they interact with those floating images. This means dividers use only available horizontal space – same way as text does, and continue to do so as text and images realign to suit varying window widths.

Didn't spend much time outside with all that was going on inside, so this picture is selected out of maybe a hundred or so taken during short walks in front of the hotel. Got the main landmark, the arch, lined up in the picture…

Our room was at the 17th floor, so not too bad a view through the window either.

Another reason for not strolling around the block when I didn't have to, was the temperature and humidity at the end of the heat-wave in the area. 104°F (40°C) is a bit above my comfort level.
The temperature dropped significantly when it started raining the day we left, which was OK with me.

Example lifted straight from my International Steel Guitar Convention 2011 page.

I prefer this automatic “same as text” alignment for such dividers – as shown in the example above, but I also want visual dividers defined as backgrounds under CSS control. To make it work as intended was easy enough, when, after a couple of months headscratching I had a bright moment.

<p> Some text ...
<span class="divide"><br /></span>
 ... and maybe some more text.

span.divide {padding: 21px 0 0; background: url("divider.png") no-repeat 47% 0; 
overflow: hidden;}

The <br /> in the span has purpose in a no-style situation, where it it will cause a vertical break in the content at the right place. With active styling it is literally “locked in” in the span and has no effect.

The overflow: hidden on the span holding the visual divider, was the tiny bit needed to make the entire span adjust “same as text”. The effect is explained in CSS2.1: Block formatting contexts, which all web designs rely on one way or another.

Strange it took me so long to rediscover and use this simple effect – I must be getting old and/or out of practice…

With this technique added to what is already in my toolbox, making visual vertical dividers play nice under all conditions is a breeze.

and then there's “microtuning”

The example shows a lot more than automatic alignment of visual dividers. Those floating images are also individually styled to align in predictable ways – using CSS microtuning™.

My microtuning technique is described in quite some details on the linked to page. Thus, no need to go further into it here.

out of shape?  no problem

Especially images come in all shapes and sizes, and I usually do not clip and cut and size them to try to make them fit perfectly in with their surroundings. Instead, I place them logically in the source‐code, and then adjust how they interact visually until I am pleased with the overall result.

Having methodology and techniques in place for solving layout problems caused by irregularly sized and shaped elements in content areas – i.e. making just about anything fit anywhere, is in my opinion much better than to predefine what shapes and sizes various elements must have in order to fit in.

Achieving perfect visual alignment between all parts of content, is in practice not possible in fluid‐responsive design – conditions vary too much with the wide span of windows/screens. However, when it all interacts optimally with the elements and content at hand, it may appear well aligned on most screens.

Appearance is really all that matters in visual design, isn't it?

recycling what works

This way of aligning visual vertical dividers with regard to their surroundings, is pretty plain sailing. It is one of a number of visual align methods used on this site, and is now my preferred method for placing dividers in text alongside floats.

In this article I touch on how a few potential problems in responsive design can be solved, or rather how I go about solving them. There are almost as many ways to do things as there are web designers, and my solutions may only be right for me.

Be that as it may, writing it all down every time I come up with an idea, makes it easier to remember what I did and what for. As with most things in web design, it is all about finding new ways to achieve old visual goals – a form of recycling.

And, if others find some of it useful, all the better, which is why I release some of these writings of mine from time to time.

sincerely  georg; sign

Hageland 19.feb.2014
10.mar.2014 - rearranged the entire article and split out all about microtuning as a separate article.
last rev: 10.mar.2014 advice upgrade advice upgrade navigation