Stretchable CSS Box Layout

Stretchable CSS Box Layout

Stretchable CSS Boxes

Download the article source files

Every now and then you might stumble across a web site that has used layout boxes where they are actually stretching and breaking apart on your hi-res monitor. Or you may have decided to make your own layout boxes manually only to have to change layout later and learn just how hard it is to re-align the whole layout.

Well over time I have perfected my own version of CSS boxes that are incredibly versatile and are useful for liquid layout web page design. You can contain them in a fixed size, you can make them small - very small, or you can make them so they stretch infinitely in both directions. Even better, you can do it by simply wrapping your content in a start and end include (two lines of code). This is what I consider the holy grail of CSS boxes.

There are a number of techniques on the web and so far I have found most, if not all of them lacking. They generally involve compromise, don't work properly or are complicated to implement. My technique doesn't involve any compromise or any shortfalls - it just offers complete versatility. Best of all it will work across any browser without the need for any browser detection. Read the tutorial to discover how to get those fancy boxes with the rounded corners or custom sculpted corners.

Before We Begin

Design Toolkit

Designing for the web requires design tools. Here are a few free tools I use for design:

Inkscape - an essential vector design tool for getting those ultra-smooth edges and great modern designs (vector graphics). Perfect for graphical elements, banners, not generally used for editing photographic material unless you are embedding something pre-edited (like from the Gimp)
Gimp - Raster editing tool (though I believe it has vector capabilities) - use for cutting corner and edge pieces from your Inkscape designs. Also use for photo editing and post-processing of your Inkscape designs
Blender - For more advanced designs in 3D. You can produce some VERY nice designs using blender but its functionality is far more advanced. There are articles to assist in using Blender as a vector editing tool too
Open Clipart - a huge array of free clipart you can use for any purpose. It is all in vector format so you can import directly into Inkscape

Breaking Down The Square

Creating CSS boxes usually starts out with creating a square, and by using Inkscape's options you can apply roundness to the corners and perhaps a shadow. This is all a matter of taste and design that I won't really get into. There are many, many design tutorials on the web for Inkscape, the Gimp and other popular design tools. Essentially it's a matter of creating a master of the box as it will look on your web page. I have created two here - one plain box (box1) and one containing a heading bar (box2):

Box 1

Box 2

The next step is to break our boxes down into their distinct parts in the Gimp. My design dictates the use of top-left, top, top-right, left, right, bottom-left, bottom, bottom right and fill. For this design, transparency does not work, so the background colour must be copied along with the fore.

Using guides to break down distinct parts in the Gimp

Although it looks really complicated, the guides make it very simple to ensure uniformity in selections which helps build our CSS. Guides can be dragged from the top and left rulers.

Here is a preview of what we are trying to achieve as actual CSS boxes:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla est dui, blandit eu porttitor sit amet, suscipit non dui. Aenean velit mi, fringilla in adipiscing et, interdum non arcu. Nulla facilisi. Phasellus magna nibh, eleifend et ultrices sed, ornare in urna. Pellentesque quam justo, facilisis in placerat ut, interdum ac dolor.

Box 1 in action

Lorem ipsum dolor

Box 2 in action

The Code

There is not actually much to explain about the CSS, it is really quite simple to look at, though it was frustratingly difficult to actually come up with that working combination that works browser-independent.

The parts that make up the divs simply make use of 'repeat' and 'no-repeat' to make up the edges and corners. The body defines the block in the middle where content will be held. Note the use of 'zoom:1', this was to keep spacing consistency across browsers. Although using zoom: 1 seems pretty innocuous, it gives IE a personality change and makes it play nice with position and size. It does not affect non-IE browsers. Previously I had used the famous Holly hack but this was deprecated from IE7.

The sample download code includes two sets of includes for the two types of boxes and the included web page makes use of #includes for use with web servers. To run the html locally, replace the #includes with the actual code held in the include files.

Conclusion

When I first started making websites and writing CSS the first thing I tried to do was create nice box containers. That's when I started to learn the shortfalls of CSS and the difficulty in getting cross-browser CSS to play nicely. There was always the blame-game that IE wasn't doing it right - that's great from an academic standpoint but from a developer's perspective it is an ongoing nightmare. All newcomers to CSS and HTML fall into the same trap believing CSS is just a few simple commands for positioning, colour and formatting only to discover the labyrinth that is CSS.

Make sure you take the time to sculpt some nice boxes that match your website's theme colours, and always keep the masters (Gimp xcf files, Photoshop psd files and Inkscape svg files) in a safe place. Use version control such as Subversion to keep track of site changes, including your artwork. Playing with CSS can sometimes lead to such a confusing array of changes that you are unable to easily revert back to a previous working form of your code when a series of changes inadvertently lead to destructive results.

Forget searching any further for CSS box techniques, this one is the last you will ever need. Future versions of the CSS standard will likely handle much of the work for you, but for now you've got the legacy of old browsers to contend with.

Content

Open Source