Rearranging Boxes: Why You Should Structure Your HTML To Be Flexible

Posted: 22 Aug 2011 05:30 AM PDT

One of the words that comes up again and again in conversations about responsive design is the word flexible. We need to create flexible layouts where we’re choreographers of our content.

Much of the conversation revolves around making your css flexible. Equally as important is how you structure your html.

I want to walk through a series of layouts and think about some of the problems we’ll need to solve and some of the limitations we’ll face based on our html structure.

I’ll be raising more questions in this post than solutions. The point ultimately is to get you thinking more about your html.

I’ve created a simple demo page with the layouts described below. The html and css in each example is rather simple and I offer the demo mostly to get you to set up something similar and begin playing with blocks again.

There’s not much to see in the demo unless you want to view the source and copy the code I used.

The CSS Box Model

Before looking at the examples we need to understand something about the css box model.

When you add any element to your html you’ve created a box of a certain type according to the css box model. While there are a variety of possible types most elements will be either:

block — laid out vertically one on top of another
inline — laid out horizontally one next to another

There are other types of boxes (and some new ones coming with css3), but these are the most common we encounter today.

When we consider layout at a high level structure we’re mostly laying out block level boxes. One for your header, another for your main content area, and so on.

We have 3 main ways to organize these boxes in a layout.

Normal Document Flow
Floats
Positioning

By default these boxes will be in the normal document flow and fall one below the other in the order they appear in your html. To create more interesting layouts we typically change these defaults by floating or positioning some of the boxes.

Typically we structure our html in the order we want our boxes to display starting at the top left and working down to the bottom right.

At a high level this structure might look something like the following where box 1 is your header, box 5 is your footer, and boxes 2–4 are content and sidebar boxes.

 <div id="container">   <div id="box-1" class="box">Box 1</div>   <div id="box-2" class="box">Box 2</div>   <div id="box-3" class="box">Box 3</div>   <div id="box-4" class="box">Box 4</div>   <div id="box-5" class="box">Box 5</div> </div>

In our css we set widths (and perhaps heights) on our html boxes. We also float (and sometimes position) boxes so they don’t automatically sit one below the next.

With these basic concepts in mind let’s look at some examples.

3 Column Layout

Consider the image above. It contains 5 boxes representing a common 3 column layout that’s relatively easy to set up. How easy is to to change that layout without changing the html structure?

The html for this layout is the same as in the section above. Here’s the css I used. The heights and outlines are just so we could see the boxes.

 #container {width:65%; margin:20px auto} #box-1 {float: left; width: 98%; height: 100px; outline: 1px solid red;} #box-2 {float: left; width: 31%; height: 200px; outline: 1px solid olive;} #box-3 {float: left; width: 32%; height: 200px; outline: 1px solid fuchsia;} #box-4 {float: left; width: 31%; height: 200px; outline: 1px solid maroon; } #box-5 {float: left; width: 98%; height: 100px; outline: 1px solid blue; }

A few months back I posted about 3 column fixed-width layouts and showed how to rearrange the 3 columns in the middle row of this layout.

If you remember there are 6 possible ways to order the 3 columns. Without altering the html we can achieve 4 of those combinations by changing the direction of one or more floats. For the remaining 2 combinations we needed to use positioning.

What’s more difficult is changing the order of the rows. In fact we can’t do this with floats alone.

Note: We could swap the widths of boxes 1 and 4 and make it appear as though we’ve swapped the top 2 rows, but that only works if we have no content inside, which we’ll obviously have in a live site.

Positioning is necessary to change the order of the rows and we’d need to know something about the height of some of our boxes. The only other option is to restructure our html, which defeats the point.

The above brings to our attention 2 points in regards to keeping html unmodified.

floats are generally good at rearranging columns, but they aren’t perfect
positioning and height information is needed to rearrange rows

Changing 3 Columns to 2 Columns

Think about how you’d take the 3 column layout and convert it to a 2 column layout like the one seen above. Something we’ll likely be doing with responsive layouts.

We don’t want to touch our html to change the layout. Can we change only css and reduce the 3 column layout to a 2 column layout? In this case yes. Here’s the css. The html is the same as above.

 #container-2 {width:65%; margin:30px auto; clear: both; padding: 20px 0} #box-2-1 {outline: 1px solid red; float: left; width: 98%; height: 100px;} #box-2-2 {outline: 1px solid olive; float: right; width: 31%; height: 100px;} #box-2-3 {outline: 1px solid fuchsia; float: left; width: 65%; height: 222px;} #box-2-4 {outline: 1px solid maroon; float: right; width: 31%; height: 100px;} #box-2-5 {outline: 1px solid blue; float: left; width: 98%; height: 100px;}

In the original layout all 3 columns are floated to the left. To change to a 2 column layout I increased the width of box 3 (the main content box) and set boxes 2 and 4 to be floated right.

We could flip the columns to by switching the direction of all 3 floats in the 2 column layout.

So far so good when it comes to rearranging a layout through css floats, but it’s still limited in the different layouts we’ve managed to achieve. For example try to get box 4 to sit on top of box 2 in the sidebar and you’ll find it’s not so easy.

Intermixing Boxes

Let’s make things a little more complex and a little more realistic. Consider the image above. We have a 2 column layout, with 3 boxes in the sidebar. In the html the boxes sit in number order.

As the browser gets smaller we decide this layout needs to become a single column. Again a common layout change we’ll see in responsive designs.

If you play around with the code in the demo (something I encourage you to do) you’ll find it’s simple to create a single column as long as you’re fine displaying the boxes from top to bottom in the same order they appear in the html structure.

Again it’s not so easy to rearrange rows without rearranging html structure or making greater use of positioned elements. However it’s something we’ll likely want to do.

Imagine box 2 being a block of ads. On a widescreen that works well. On a phone you probably want to see your content before the ads.

One other thing that isn’t easy to do is intermix the boxes. We can rearrange the boxes so they flow around each other, but it’s not a simple task to move one of the sidebar boxes so it sits inside the main content box with the content flowing around it.

It’s possible, but we’d need to prepare our html considerably with additional classes or ids and we’d need to do more than change a couple of float directions.

This adds another concept to our list.

floats are generally good at rearranging columns, but they aren’t perfect
positioning and height information is needed to rearrange rows
crossing ~~streams~~ box borders is not simple

There are solutions to all the problems I’m describing, but they usually require you to put some more thought into your html if you don’t want overly complex css.

A More Realistic Example

Let’s consider an even more realistic example. Here I’ve filled in the content container with post title, post content, and comments.

It’s quite possible that when we take this layout from 2 columns down to a single column we want some of the boxes from the sidebar to slide in between the title, content, and comments boxes.

For example box 2 might be meta information about the post, perhaps author info and the publication date. At one column we probably want that information right below the post title. Box 4 might be social sharing links, which will fit nicely below the content and above the comments.

If we’ve wrapped all the content information in a single div to make it easier to layout at 2 columns, we’re going to have difficulty moving the sidebar boxes across this containing barrier.

If we leave out the content container we may have trouble getting the sidebar boxes to slide into the proper row if they’re located above or below our entire content in the html.

In all likelihood we might have also wrapped all the sidebar boxes into a single sidebar container, further complicating layout changes.

These problems aren’t impossible to solve. The point is we need to think through them when setting up our html, because our html structure is going to determine how easy or difficult it is to achieve various layouts.

The examples I’ve shown here aren’t all that complex, but hopefully you can see how they could become complex very quickly. Take a look at most of the sites you see today and think about some of the ones you’ve developed and ask yourself how the content might better be presented with a different number of columns.

Then think about how easy that would be to achieve without altering your html.

Summary

Responsive design presents a road map toward where web design is heading. It provides a good solution to the challenge of designing sites that work with the flexible nature of the web.

The new possibilities it provides for us will also present new problems for us to solve.

Until now we haven’t had to think much about rearranging the boxes in our layouts. They’ve generally remained fixed relative to each other. We set them up once and forgot about them. At most we’ve let one box drop below another as it saw fit.

Over the years we’ve developed patterns to achieve a large variety of layouts. Our new challenge with responsive layouts is going to be developing patterns that change from one layout to the next in a much larger variety of combinations.

I’d encourage you to start playing around with blocks and boxes like you did as a kid. Set up some html like I’ve done with these simple layouts and work out the different ways you can reorganize the boxes by changing the css only.

You’ll learn a lot about the limitations your html structure imposes on your ability to change layouts and it’ll get you to rethink your html.

Being able to move seamlessly from one layout to another is a skill we’re all going to need in the days and years ahead.