Those who follow me on Twitter will know that I recently had a large issue whilst developing a site with CSS and IE not playing ball at all...yes that old chestnut is back!
The main problem arose whilst building a site with a 3 column layout, which had 2 columns in the centre as well as 2 full width sections above and below that. Normally I'm pretty good with CSS and getting it to work cross-browser, however for some reason this time I didn't test all the way through the development in IE and when it came around to testing, the whole layout just fell apart which had me completely confused to say the least. Anyway enough of what lead me to write this post and more on what all this is about!
Whilst I was up at 2am rebuilding the CSS wire-frame for that site from scratch I had a brain-wave to create 3 different pre-built CSS templates for use in future projects, which will increase my development time as I wont need to build the wire-frame for every site I build I just pick a template and work from that point. Now these templates I've made aren't just any old CSS templates, these are cross-browser including zero hacks for IE6, 7, or 8 and without the need for conditional IE only CSS files.
Each of these templates includes a reset as the first port of call and then go on to define the actual layouts. I was reminded at work that a reset is always a good idea for cross-browser compatibility, by including it in the main style sheet I will always be using one and won't need to have an extra CSS file being called by the page, which can cause issues in IE if you have lots of CSS files on a site.
The templates I chose to build are -
Single column
2 Column using 33% width on 1 column
3 Column using 33% for 2 columns and have the third fluid (normally the middle)
These are the most common layout designs that I use daily, and the best part is that all 3 layouts are contained in just 1 CSS file, so just by including that 1 file I have the ability to completely change the layout of a site without the need to write a new CSS sheet, time saving is the key here!
All of these layouts are fluid layouts, which means that they will automatically resize depending on the users screen size (but you knew that already right?), however within this style sheet I have also included an optional rule which will allow me to transform these fluid layouts into a fixed width layout, again without the need to write any layout CSS at all.
I'm fine-tuning this file at the moment but as soon as I have it finished completely and tested each layout in all the browsers, I will make the file and code available on here for you to download and use in your own projects. I doubt I'm by any means the first person to think of this, or even do it, however I would suggest to all developers of all levels who haven't already done it, to make a template for all your most commonly used layouts, it will save you lots of time, believe me!
