I often wonder why I don’t see that many liquid-based layouts when browsing the web. It seems to me books have preached the use of relative positioning and sizing for ages now, but the closest I see from relative values on most websites and blogs are those expressed in ‘em’s for text sizes (or even for image sizes in some cases!).

Why is it that the internet, so passionate about user-friendliness, does not go out of it’s way to produce a layout that is flexible to the screen resolution of an arbitrary device or window? In a time where netbooks are becoming more and more popular every day, where monitor sizes vary from laptop to desktop, or even from landscape to portrait mode on tablets, it seems the need for a more flexible framework is more than ever present.

Working for Scriptnetics Inc. has given me enough time and resources to experiment with CSS and Javascript (amongst other technologies) to produce a corporate website which would reflect the need of our clients: since we mainly do software for tablet PCs, the aim was to provide content in an arbitrarily sized window, at an arbitrary width-to-height aspect ratio.

So why not start this exposé with a few screenshots?

You can see the website by yourself at http://www.scriptnetics.com/

While we’re at it, why not give out a few tips to the CSS newbies out there?

Firstly, let’s assume that pretty much every measurement is done in percentages—widths, padding, margins—and that floats are used to divide the columns. There you have it, it doesn’t become easier than that!

Let’s see how images behave, shall we? If you look at the above screenshots, you will see that two methods for displaying images are exploited. The first is through the use of the <img src=”" alt=”" /> XHTML tag, while the second uses the background url() property of CSS. The main difference between both is that the XHTML tag supports relative scaling, while the CSS background property provides an easy answer to relative positioning.

XHTML images

<!-- navMenu is of relative size -->

<div id="navMenu">
   <img src="" alt="" style="width: 30%;" />
</div>

CSS background images

/********************
The image will be displayed within #someParticularElement and will
be positioned relatively.

Therefore, when #someParticularElement changes size, it reveals
or conceals parts of the image at a different rate on each side,
according to the percentage values specified.
********************/

#someParticularElement {
   background: url(images/image.png) no-repeat 30% 40%;
}

To achieve either effect is simple; to get an image to scale down relative to it’s container, one only needs to specify the width of the image (say, 30% of container width) for the image to scale up and down in size, while preserving it’s aspect ratio. The main advantage of using XHTML images over CSS background images is that it represents a more semantic way of delivering information through images.

The CSS background image alternative effectively moves the background in a certain expected way when the window resizes. The biggest disadvantage of using background images to present content, semantics aside, is that images bigger than their container are needed. When you don’t know how big the image will display, you can only hope for the best—it hopefully won’t be viewed on an Apple 30″ Cinema Display…

Lets move on with another nifty trick for preserving the relative aspect ratio of a container element.

Go and take a look at this page to see an example of an aspect ratio preserving layout. Notice the use of the CSS background property to display the image, and how it is displayed at different resolutions (these things are better tried than viewed on a static image). What makes this one work is actually quite surprising : when you set a vertical margin or padding in percentages, it is calculated relative to the width of the parent container. What this means is that you can use padding to set the “height” of an element.

If the purpose of that element is to contain other children elements, you can make the children floats, or you can position them absolutely. The biggest problem with this technique, however, is that even though the parent is relatively sized, it can only accomodate so much content. Floats, for example, tend to overflow the parent container:

And so it often becomes easier to use absolute positioning.

Another nifty CSS trick is to use negative margins. The presence of a negative margin in one direction effectively pulls the displayed element an equal amount in that direction. This might not appear immediately intuitive, but it turns out very useful when trying to vertically (or horizontally) center an element.

How to center an element both vertically and horizontally

#parent {

   /**********************
   The parent element needs to be positioned.
   **********************/

   position: relative;
   /* position: absolute; would also work */

}

#parent #element {

   /**********************
   Define a width and a height.
   Here the height is taken care of by the padding, which will
   be 3/5 the value of the width.
   **********************/

   width: 50%;
   padding-bottom: 30%;

   /**********************
   Set the position to absolute.
   **********************/

   position: absolute;

   /**********************
   The margins need to be set to half the respective width and
   height of the rendered element.
   **********************/

   top: 50%;
   left: 50%;
   margin-top: -15%;
   margin-left: -25%;
}

I realize that in theory, all of these tricks are quite simple. It is however quite rare that I see a page that makes a genuine attemt to push the limits of ‘resizeability’. Ironically enough, however, at the time this article was written, this blog was fixed width. We all need to make design decisions, and they are not always the same. Besides looks, we need to consider the product’s application and the impact it has on users.