HTML: Quick responsive 2 to 4 column content

I needed to come up with a quick method I could use across many sites to allow customers to organise their content in 2 – 4 columns. The code needed to be quick, cross compatible, and “copy and paste-able” (I made that phrase up). What I mean here is I could use the code on practically any website with little to no configuration changes.

The first stage then was to come up with unique css id’s and classes that would not conflict. The easy way is simply to add my company name them in the form of “ey_”. (Short for elliottyoung).

Second I needed a way to float all the columns that did not include multiple “if IE” statements and worked across a variety of DOCTYPEs and devices. For example IE 6 & 7 push the 4th column down to the second line if you use 25% as your calculation. Instead of if statements, I applied this simple fix was to take a point off each! 25% becomes 24.9%. This means the width does not overflow and get pushed down a row. For those of you that want precise line-ups please move along, however for those who need a quick solution to column rendering and are not too worried about a micro pixel, enjoy my code!

Here goes…

Css:
* { padding:0px; border:0px; margin:0px; }

body { width:100%; }
p { padding:10px; }

#ey_2col { float:left; width:49.9%; }
#ey_3col { float:left; width:33.23%; }
#ey_4col { float:left; width:24.9%; }

.clear { clear:both; }

2 columns:
<div id="ey_2col"><p>Col 1</p></div>
<div id="ey_2col"><p>Col 2</p></div>
<div></div>

3 columns:
<div id="ey_3col"><p>Col1</p></div>
<div id="ey_3col"><p>Col 2</p></div>
<div id="ey_3col"><p>Col 3</p></div>
<div></div>

4 columns:
<div id="ey_4col"><p>Col 1</p></div>
<div id="ey_4col"><p>Col 2</p></div>
<div id="ey_4col"><p>Col 3</p></div>
<div id="ey_4col"><p>Col 4</p></div>
<div></div>