Tutorials on how to create columns and multi-column layouts with CSS have been done a million times over, it seems every person who has touched CSS wants to tell someone else how to achieve this one thing in particular more than anything else. I don’t have anything new or groundbreaking to explain here - though it will give me opportunity to explain some very clean tricks that I am using these days to keep my markup light and my CSS efficient. A neat clearing method, negative margins, and working around IE.

Firstly - If Internet Explorer supported web standards and wasn’t so bent on keeping backwards compatibility we could use CSS3’s multi-column module, unfortunately this won’t happen for a long long time so let’s look at what we can do in the here and now.

Some code to start with

What do we want to achieve should be the first question you always ask - In this case it’s 50 / 50 columns - So we’ll start with a container for our columns and a sensibly named class ‘columns’ and have two inner containers ‘left’ and ‘right’. We use classes so we can re-use this style many times in the page and keep the markup valid.

<div class=”columns”>
  <div class=”left”></div>
  <div class=”right”></div>
</div>

Some CSS to start with

We are wanting 2 block level elements side by side each occupying 50% of the total width of the container. So we float both columns left and give them width: 50%;

.columns .left {
  float: left;
  width: 50%;
}
.columns .right {
  float: left;
  width: 50%;
}

In IE there’s already problems, all Internet Explorers have a rounding bug when it comes to calculating widths of two floats side by side - It seems 50% + 50% = 101%!
There’s a simple fix we can just drag one of the columns left by 1px and the columns will happily sit next to each other.
A negative margin will drag an element from it’s original position, it’s a technique that offers a whole range of opportunity to the CSS coder who knows how to use it.

.columns .right {
   float: left;
   width: 50%;
   margin-left: -1px;
}

And there you have it - it’s that simple to add 50 / 50 columns with CSS, no tables are necessary

More flexibility - less maintenance

Padding / Border both add to the total width of an element, so adding any of these properties will break the layout and cause the right column to drop. So, the method I prefer to get around this limitation is to simply add another element as a buffer in between that we can apply the padding / border to without effecting the outer column elements.

<div class="columns">
  <div class="left">
    <div class=”inner”>
      <p>Sed egestas, lectus a sollicitudin imperdiet, ipsum leo sagittis sem, ac porttitor sapien nulla vitae justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Donec condimentum facilisis ante. Pellentesque arcu ligula, eleifend ut, semper in, tincidunt id, sapien. Donec at sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sodales iaculis elit. Mauris dolor leo, lobortis nec, fringilla at, nonummy eu, nibh. Nunc neque dui, vestibulum ut, euismod eget, tincidunt ac, sapien. Sed sem mi, vehicula ut, aliquam eget, fringilla nec, odio. Integer metus sapien, pretium accumsan, vehicula vitae, scelerisque non, felis. Sed nibh. Ut turpis ante, lobortis sed, viverra vel, blandit eget, nibh. Duis mi urna, lobortis vitae, adipiscing vel, hendrerit a, leo. Vivamus viverra, elit pulvinar vestibulum tempor, nibh pede posuere pede, in auctor mi velit a elit. In nunc ante, ornare nec, feugiat in, dictum in, est. Fusce eu tortor. Morbi aliquam.</p>
    </div>
  </div>
  <div class=”right”>
    <div class=”inner”>
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce facilisis est nec arcu. Sed sem. Praesent ut elit. Donec ultrices lacinia metus. Nam euismod. Praesent sit amet mi et justo commodo convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vitae turpis auctor tortor bibendum congue. In viverra arcu eu erat. Maecenas orci eros, blandit eget, vulputate et, commodo mollis, quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce id purus. Curabitur in mauris vel mauris viverra ullamcorper. Ut rhoncus turpis ut dui. Suspendisse augue tellus, elementum id, gravida vel, gravida eu, dui. Fusce et nisi. Donec ornare ornare risus. Donec blandit facilisis diam. Donec blandit.</p>
    </div>
  </div>
</div>

And now we can add padding to our columns safely

.columns .inner { padding: 20px }

You can add other styles to the columns as long as you take into account the issues outlined above
- IE’s rounding bug, padding / border adding to total widths - you can usually get around these issues using negative margins. Let’s say I wanted to add a dividing line between these two columns, we add a 1px border to one of the columns and increase the negative margin by 1px to accommodate the change.

.columns .left {
	float: left;
	width: 50%;
	border-right: 1px solid #EFEFEF;
}
.columns .right {
	float: left;
	width: 50%;
	margin-left: -2px;
}
.columns .inner { padding: 20px }

/* The middle is now clearly defined so we should
   make the padding the same either side */
.columns .right .inner { padding-left: 22px }

And, last but certainly not least

Clearing your floats! This is a most important step to understand, When we floated our columns we removed them from the normal flow of the document, essentially this means that our container collapses because it has nothing left inside. I’m thankful to the folks at Sitepoint for introducing me to this clearing method that doesn’t need to any additional markup and it’s wonderfully simple - Give the container overflow: hidden; and width: 100%;

.columns {
	overflow: hidden; /* Clear floated children */
	width: 100%; /* Clear floated children in IE */
}

I’ve tested this method in all the popular modern browsers as well as IE5, IE5.5 and it seems to work fine and dandy. So here’s the 50% width columns with CSS example

I wanted to write a tutorial that could help explain a few ways to build more robust page elements using XHTML and CSS that were able to cope with changing font-size.
I wanted to find a difficult example to replicate with CSS to emphasize the issues surrounding it, I chose to try and create the navigational menu on Digital Brand.

Semantics

An important skill that web designers need is to be able to recognize parts of a design that have semantic meaning. By looking at this image I can tell that there is a heading and a list of links, the semantic markup could look something like:

<h2>Navigation</h2>
<ul id="navigation">
  <li><a href="#">Identity</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Slices

Because of the nature of the box model we need to look at our image and see if it can be sliced up so that we can apply different parts of the image to different HTML elements.
Looking at the image here’s what I came up with..

Understanding Sliding Doors

The real trick in making flexible containers for your textual elements is to understand how to apply the sliding doors technique published by A List Apart. Basically it requires that you have background images that overlap and are positioned opposing each other so that as the element grows in size the background images spread apart from each other. So to apply this technique we need to slice our images again and make the underlying background-image larger than we need it to be to allow for larger font sizes. How large you make these images depends on what sort of font-sizes you want to support - Internet Explorer has 5 settings, smallest to largest - where Firefox seemingly has no limit and can make the size of the font rediculously large. It’s not reasonable to support all sizes and to save on download time you should try and keep the filesize to a minimum but still providing enough flexibility within reason.

When looking for image slices you should try and see if parts of the design can be tiled so that you can keep the file-size down and reduce load times, region 3 is an area where you could apply a vertically tiling background image to cover that area. The image I have used for this is only 11px x 10px:

The images for the header are: and
See the header example that displays the sliding doors technique.

Exactly the same for the footer and

More markup

Now, CSS has come a long way in the last few years but still only allows 1 background image per element(multiple background images are a part of the CSS 3 recommendations) so.. at the moment we are forced to add non-semantic elements to contain our background images when we need to use more than is supplied by the semantic markup itself. So to achieve the design I have used the following additional markup:

<div id=”example”>
  <div class=”inner”>
    <h2><span>Navigation</span></h2>
    <ul id=”navigation”>
      <li><a href=”#”>Identity</a></li>
      <li><a href=”#”>Services</a></li>
      <li><a href=”#”>Products</a></li>
      <li><a href=”#”>Portfolio</a></li>
      <li><a href=”#”>News</a></li>
      <li><a href=”#”>Contact</a></li>
    </ul>
    <div id=”footer”><span></span></div>
  </div>
</div>

The two outer nested divs are simply holders for the background images for regions 2 and 3 in the image slice diagram above. I have placed these elements as the outer wrappers so that everything is contained by a wrapper and we can alter the size of the whole menu through this one element; and that because these are the outer most elements the other images will sit nicely over the top. I’ve added spans inside the heading beacuse I need to apply the second background image. The footer contains two elements for the same reason.

For the lists - I have the background image on the ‘li’ elements and I have the ‘button image’ on the ‘a’ elements. I’ve separated these images so that we can control the position of the the images independently from each other and position the ‘buttons’ in line with the text.

Putting it all together

Now we have a navigational menu that the design stays intact with font-sizes ranging from… ‘really big’ to ‘really small’

We were able to achieve a robust navigational menu of the original design using a combination of:

• larger than expected background images
• repeating background images
• The ’sliding doors of CSS’

Please test out the working example below and change the font-sizes - You should be able to notice where the divisions are and hopefully see how you can apply these techniques to your own designs to make them more flexible.

View the working example of the Robust design elements example

Things to remember

Use em’s or percentages for your font-size units in CSS - font-sizes given in pixels cannot be resized in Internet Explorer 6 and below. ‘IE6′ is currently the most popular browser and will be so for the near future so this is important if you want to support this feature for the majority of users.

Test in as many browsers as possible - there’s a similar function to text-size increase/decrease and that is zoom, some browsers only have zoom - some have both features. Zooming not only increases the size of the font but the size of all units of every element in the page - you don’t need to know any special tequniques to make zoom work properly and keep the design together as it increases the size of the images as well - I personally don’t like it as much because it takes the images that you put your heart and soul into to and stretches or squashes them making them pixelated or blurry. If you would like to see this feature for yourself you could download the Opera web browser.

Remember to use appropriate filetypes for the type of image you are using and use compression where possible to reduce download times and speed up the loading of your site. For images with only a few colours like icons you should use .gif or .png - for images with many colours and/or gradients use .jpg’ Test out the different filetypes to see which one looks the best and is of the highest quality.

This tutorial doesn’t aim to explain in depth how to actually style the individual elements to accomplish this design(though you are welcome to view the CSS of the working example), I intended to take a higher view of the issues surrounding building flexible design elements and try to show you how you can use techniques like sliding doors and repeating background images to achieve them.

The most frequently asked questions I have come across by web designers are related to the issues they are having making their designs appear the same in different browsers. The biggest contributor to these differences is in the default margin / padding that modern browsers place on page elements which widely vary, so to gain control over this we use the universal selector to make a change to all page elements. This can reduce the amount of CSS you use significantly.

* {
  margin: 0;
  padding: 0;
}

We also need a consistent font-size across browsers, to accomplish this I use the font-size keywords to obtain a solid font size across the board - delivering Internet Explorer 5.x a whole keyword step smaller than the rest due to it’s incorrect implementation of the sizing’s.

body {
    font-size: small;
}
* html body {
    font-size: x-small; /* for IE5 Win */
    f\ont-size: small; /* for other IE versions */
}
html>body {
    font-size: small; /* be nice to opera */
}

We then need to re-declare our margin/padding where we want it and set up our standard page elements - p, h1, h2, h3 ul, dl. Remember to use ems or percentages as our units for sizing text in the site - Setting these relative units allows all users to increase the font-size locally in their browsers, as designers we need to give them this freedom - some users need to increase the size of the font simply to be able to read the content so it is also a serious accessibility requirement.

p { font-size: 80%; padding: .4em 0; line-height: 1.8em; }
h1, h2, h3 { padding: 1em 0 .2em 0; }
h1 { font-size: 175%; }
h2 { font-size: 160%; }
h3 { font-size: 140%; }
ul, dl { font-size: 80%; padding: .5em 1em .5em 2em; }
ul li { line-height: 1.6em; }
img { border: 0; }

I start all my designs from this solid and flexible base.

A goal in making any new web site should be to make it accessible to everyone, this is quite a difficult task - but, practice makes perfect so let’s get started.

There are a few quick tests that can be applied to any web site to test it’s Quality and Accessibility. To make the tests as quick and easy as possible download the Firefox web browser and the Web Developer Extension if you don’t already have these.

Validate your (X)HTML / CSS

Is your code valid?

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Disable CSS

Using the Web Developer Toolbar - CSS > Disable Styles > All Styles
Is the site still readable and usable?

If your site has been coded to web standards using semantic markup - your page should be clear and usable without styles applied.

The headings(h1, h2 etc..) should give you an accurate breakdown of the pages information.

Viewing your page like this gives you an idea of how search engines see your site - and shows you which content can be noticed by the search engine.

Disable Images

Using the Web Developer Toolbar - Images > Disable Images > All Images
Is all your content still viewable and readable?

Many people could be viewing your site like this - Whether to save bandwidth on low speed internet connections or using a browser on a small device.

Perhaps you have provided background-images to add contrast between the background and the color of the font - now, without images your fonts are all but unreadable. You will need to provide a background-color as well so that without images the contrast between the font color and background is still strong.

Test in the major browsers

Does your site look the same in all modern browsers?

Internet Explorer 5.5, 6 and 7 - The most popular browsers. The earlier versions can be downloaded from the evolt browser archive

Firefox, Opera, Netscape - These three browsers run on windows so you should be able to test in these browsers at least.

Safari is the most popular browser on macintosh computers.

Konquerer is a browser that runs on the linux operating system.

Increase the font-size

This feature is usually located under View > Text Size
Does your layout break?

All modern browsers come with this functionality built in and will be used in the future more and more. Users with poor eye sight, a person displaying a web page to another person in the room, or users with really large displays may want to increase the size of the font to make the text more readable. Your site needs to constructed in a way that offers flexibility to the design of the elements containing text.

If your site performs well under all these conditions then you have a quality, accessible site that has been created using a web standards methodology.