Friday, August 8, 2008

Tip: Use backgrounds and borders to find the edges in your CSS blocks

CSS layouts can drive you nuts

One of the most confusing things about CSS layouts are the use of floats. So I'm passing on a tip that helps me visualize where the backgrounds and edges are of blocks during the styling. Comes in handy during cross-browser testing.

By adding in some backgrounds, I can start to see the blocks and where the browser thinks the edges are. Also, if I put a border on and it collapses to the top, I know that I have to float that element to get it to wrap around the inner floats. Read up on CSS floats for more info.

Here's an example I'm doing today

Adding these colors let me easily get all the sizes and floats in place and was able to have 4 major browsers up and make sure each one fit well.

And the result

So now, it's easy on the web to see the exact location of the blocks. Obviously, once things are lined up, remove the colors and you get a perfect result.

One more thing

Be careful with border because if you have an exact pixel sized width block, it will add 2px to the width of that block.