I’ll just sit the next couple of plays out…
So I’ve been overhauling my site lately because I’d managed to make it look more like the world’s worst played game of Tetris (i.e. ridiculous shapes strewn all over the place without any rhyme or reason) than a well thought out and designed website.
I decided that I wanted to have a weekly post on my topic placed inside of its own preview div on my homepage. However, this turned out to look pretty crappy in its initial iteration:
My spacing here leaves much to be desired. After reviewing the potential reasons for this, I realized that in my infinite wisdom, I’d left out a critical piece of code in my external style sheet…
I added a margin of 3.3% and reduced the width of each box by 2%. An example of the new code is below.
Yeah, the margins really helped this whole page look marginally less awful:
You may have noticed that I didn’t use a table to get this stuff done – whether this was advised or ill advised, its how it went down. I used a “parent div” that contained a “left,” “right,” and “center” div – I thought that a table would end up being more complicated in terms of getting the right spacing, and this solution worked out well. To see how the exact code looks, check out the screenshot below.
Following these steps can help you create more reader friendly spacing and layout that makes the site less off putting to the user.