More recently I have switched to a simpler layout. YUI is very powerful and veratile, but I don't need all that sophistication.
OK, I know: most bloggers want nothing to do with writing HTML. Most would rather use something simple like Wordpress and concentrate on their blogging. That's fine, but..
Earlier today I visited a blog where the owner mentioned that he'd like to put something in a sidebar but it wouldn't fit and he had no idea how to fix it. Of course he could hire a Wordpress expert to help him with that if he really wanted it badly enough.
But honestly, writing your own pages isn't that hard. It probably isn't all that hard to tweak Wordpress either but for those of you us who like holding the reins, writing HTML from scratch is a crucial skill. We can control every aspect of our site and never have to say "I'd like to, but.."
What is a little hard is CSS columns. The basics are easy enough, but when you get into wanting to do more tricky things, understanding absolute vs. relative positioning can give you a headache.
Enter Yahoo Grids and their wonderful Grid Builder Tool.
The Grid Builder makes this easy. To create this layout, I chose a body size of 974px, a left sidebar of 160px and then set the Row selector to "2 column (75/25)":
The resulting code is easy to understand:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>YUI Base Page</title> <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> </head> <body> <div id="doc4" class="yui-t1"> <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> <div id="bd"> <div id="yui-main"> <div class="yui-b"><div class="yui-ge"> <div class="yui-u first"> <!-- YOUR DATA GOES HERE --> </div> <div class="yui-u"> <!-- YOUR DATA GOES HERE --> </div> </div> </div> </div> <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> </div> <div id="ft">Footer is here.</div> </div> </body> </html>
I modified that slightly for my needs here, but that's the basic template. You just stick your stuff into the appropriate places and you have a nice three column layout where the text loads before the sidebars.
If you found something useful today, please consider a small donation.
Got something to add? Send me email.
More Articles by Anthony Lawrence © 2012-07-16 Anthony Lawrence
The people I distrust most are those who want to improve our lives but have only one course of action in mind. (Frank Herbert)