Some time back, my colleague Dan posted a blog about CSS 3, and all of the wonderful new ways web design will change once browsers catch up to the new standards. Many of the new techniques and tools do work in certain browsers now, but what can a web development team do to create pages that have some of the look and feel provided by CSS 3 for browsers like Internet Explorer that don’t support it?
Using CSS 2 there are ways you can mimic the look and feel of some of the new functionalities in CSS 3, so that even older browsers can see your content presented in similar ways. This particular article will discuss one of the new CSS 3 functions and how to fake it using CSS 2.
Multi-Column Layouts
There are two ways to create a multi-column layout using CSS 2. However, each of them has advantages and disadvantages. Depending on the content to display, you may find that one technique will do what you need better than the other.
Using Multiple DIVs for Column Layout
This can be an elegant solution, providing the ability to display columns of fixed width and height containing freely entered text. From a content management point of view, it does require a little bit of knowledge of HTML. This method can result in a lot of content-editor tweaking to ensure that the content required does display neatly within the given columnar DIV.
I would use this technique in places where it is essential to present content in separate paragraphs, or where images might be part of the column contents.
The example CSS code might be something as simple as this:
.column {width: 250px; height: 400px; padding: 10px; float: left; margin: 10px;}
And in the content editor:
<div class=”column”>Content</div><div class=”column”>Content column 2</div>
Using Lists for Column Layout
This solution works well for people uploading content who aren’t as familiar with HTML. If I were working on a project with a keen client who wishes to update and maintain their own website, this might be the choice I’d use for a columnar layout – because it can be done without having to edit HTML at all, as long as the default list style is set to display in columns. Of course, this would involve knowing the client’s content and whether they are likely to need bulleted / numbered lists in their content as well.
The code I might use to display a list as a series of columns is as follows:
ol { list-style : none; width: 410px; height: 400px; padding: 0px; margin: 10px; }
This creates an ordered list of a fixed width and height, with no “bullet” number at the start of it.
ol li{ margin-left: 10px; padding-left: 0px; padding-bottom : 10px; width : 150px; float : left; }
This creates fixed-width ordered list lines, and hitting “enter” will create a new column. Of course, this might require the use of <br /><br /> (shift-enter in most content editors) to imitate a paragraph break within a single column.
Both of these methods are not without their drawbacks, particularly in terms of the height of each section - it can be difficult to break in the middle of a line and present columns of equal height – but until browsers catch up with CSS 3, this may be an acceptable work-around. If you have alternative methods to creating columns in CSS 2 please do feel free to share in the comments below.
