Seven CSS Layout Tips

By: Sandesh
The most dif­fi­cult thing in CSS to get right is the lay­out of your site. Here are a cou­ple of tips deal­ing just with that. Some of these tips are not exactly new, or rocket sci­ence, but hope­fully they will save some­one a bit of bother somewhere!

Tip 1: Clear out the default padding and mar­gin set­tings before you start working.

Dif­fer­ent browsers have dif­fer­ent default mar­gin and padding sizes so you want to start with a clean slate, so to speak. Use this command:

*

{

mar­gin: 0;

padding: 0;

bor­der: 0;

}

to clear all default mar­gin and padding set­tings. Also note the bor­der, which is set to 0. Please note that if you do this, you will also get rid of the pesky pur­ple bor­der round click-able images, although some peo­ple argue that the pur­ple bor­der is nec­es­sary for acces­si­bil­ity and usabil­ity. But lots of peo­ple do not like the pur­ple bor­der round images, and this is one way that you can get rid of it in one fell swoop with­out hav­ing to set img border=0 for each image (which is against the strict markup rules in any case).

Tip 2: To cen­ter your lay­out, use a con­tainer div to con­tain all your content

Declare it as follows:

#con­tainer

{
mar­gin: 0 auto;
width: xxxpx;
}

There are a cou­ple of points here to take note of. DO NOT declare the width to be 100%. This defeats the whole object since you will just have to declare the sub ele­ments within the con­tainer and then cen­ter THEM using mar­gin : 0 auto. This is VERY BAD since it means that instead of declar­ing the cen­tral lay­out once, you will have to declare it in mul­ti­ple places for each ele­ment within your container.

Tip 3: Work from the top down

Lit­er­ally start work­ing on your CSS lay­out start­ing from the top most ele­ments in your design, as well as the ‘top’ ele­ments in your HTML, such as the body, as well as your main containers.

Declare your CSS com­mands on the high­est level pos­si­ble and try and declare some­thing once only and let it cas­cade through­out. Only over­ride the com­mands at a lower level when strictly nec­es­sary. This pre­vents a ver­bose CSS file that is dif­fi­cult to main­tain and under­stand. For exam­ple, if you have { mar­gin : 0 auto} set­tings on each and every sub div within your con­tainer — you are in trouble.

Tip 4: Doc­u­ment what you are doing and use Fire­bug and the Fire­fox browser to debug

You are not writ­ing your CSS code just for your­self, some day some poor sod will have to debug it. Make numer­ous com­ments inside your CSS file to explain why you are doing things in a spe­cific way.

Fit­ting in with this, you might find your­self hav­ing to fix some­one else’s CSS more often than you think (or even your own, for that mat­ter). Use the Fire­bug add-on for Fire­fox to debug your CSS. This is a life-saver with regards to giv­ing you an insight into exactly where your design might be bro­ken and why.

The only prob­lem with this is that your design might work per­fectly in Fire­fox, but not in IE5, IE6 or IE7. This brings us to the next tip.

Tip 5: Decide which browsers you are going to build your CSS for and test from the start

Some purists insist on mak­ing sure that your web­site work for all pos­si­ble browsers, oth­ers only make it work for the ‘major’ browsers. How do you know exactly which browsers are used the most? Once again W3 Schools come to the rescue.

On the fol­low­ing page, you can see which browsers are the most pop­u­lar: http://www.w3schools.com/browsers/browsers_stats.asp. From this page you can see that some­thing like IE5 is only used by about 1.1% of browsers. It is up to you whether you con­sider it worth­while to build your CSS to be com­pat­i­ble with this browser, or whether you are just going to test your com­pat­i­bil­ity with IE6, IE7 and Fire­fox, for exam­ple. What­ever you do, when you start build­ing your CSS, start from the top, and test each and every set­ting in each of the browsers as you go along. There is noth­ing worse than build­ing a per­fect web­site in Fire­fox, then find­ing out right after you have coded a 1000 line css file that it is bro­ken in IE6. To then debug and fix your code after the fact is a nightmare.

Tip 6: Here is an embar­rass­ing lit­tle tip for fix­ing your CSS in IE6 or IE7

Let’s say your design works per­fectly in Fire­fox, but is bro­ken in IE6. You can­not use Fire­bug to deter­mine where the prob­lem might be since it WORKS in Fire­fox. You do not have the lux­ury of using Fire­bug in IE6, so how do you debug an IE6 or IE7 stylesheet? I often found that it helps to add {bor­der : 1 px solid red} or {bor­der : 1 px solid pur­ple} to the prob­lem­atic ele­ments. This way you can often see why cer­tain ele­ments do not fit into the space avail­able. It is an embar­rass­ing lit­tle tip since it is so prim­i­tive and sim­ple, but it works!

Tip 7: Under­stand floats

Float­ing of ele­ments is essen­tial to under­stand, espe­cially in the con­text of get­ting your floated ele­ments to work in the dif­fer­ent browsers!

Basi­cally ele­ments such as divs are floated to the left or the right (never to the top or the bot­tom, only side­ways). Here are a cou­ple of things to take into con­sid­er­a­tion with floated ele­ments. Each floated ele­ment must have an explicit width spec­i­fied. If you are mak­ing use of floated divs to cre­ate a 3 col­umn or a 2 col­umn lay­out, rather spec­ify the widths in terms of per­cent­ages rather than fixed widths, and if you do use per­cent­ages, make sure that the per­cent­ages do not add up to 100%, this will often cause the right most col­umn to drop below the rest, clearly indi­cat­ing that you are try­ing to fit some­thing into the avail­able space that is too wide for it. Rather use per­cent­ages that add up to slightly below 100%, such as 25%, 49%, 24% for a left col­umn, mid­dle col­umn and right column.

Float­ing ele­ments can be extremely com­plex to under­stand and it is worth while to spend some time on good sites that pro­vide spe­cific guide­lines and tips, such as the Posi­tion Is Every­thing website.

Con­clu­sion

These CSS tips for lay­out should hope­fully save you some time and effort when you next have to panel-beat a table-less design into submission!

© 2009, admin. Copy­right 2009. All rights reserved.

Save

Tags: css layout, CSS tips

This entry was posted on Monday, October 26th, 2009 at 11:21 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed.