51 designs LLC :: web design blog

When I first started learning CSS years back, there were a few… let’s say… “quirks”, that I had to get used to.  I soon found out these “quirks” are called “standards”.  One of the first quirks was the idea of “clearing floats”.

Let’s say you have a container or wrapper div on your page.  Inside that div, you have two more divs, one sidebar (floated left) and one content area (floated right) .  This is a pretty standard web layout.  However, if you were to think, “I’ll put a background color on the container div”, you’d notice that it would NOT expand to the sidebar or content divs (at least in standards compliant browsers).  This seems odd, because they are INSIDE the container… so why doesn’t the container surround them? BrainJar explains why, and I’ve heard and read other explanations, but it’s still VERY counter-intuitive to me.  But whatever – it is what it is.

The other issue I had is actually two issues, both regarding the header image: offsetting the h1 tag, and css sprites.  A List Apart covers sprites in glorious detail. As for the h1 tag, it’s fairly common knowledge now that two of the most important factors in relevant SEO are the <title> and <h1> tags on a page… especially using relevant keywords in your top <h1> tag. A simple demonstration can be seen at CSS-tricks, and as far as I can tell, Google doesn’t penalize you for doing it.  Though, it has to be relevant text, and there can’t be hundreds of hidden keywords on your site.

free css web template

So with that in mind, I decided to create a simple (really SUPER simple) web template that addresses those issues. I call it “51 designs template 1″ — pretty original, don’t you think?  This is essentially the framework I used when I started designing the main 51 designs site, and it’s easy to customize. The navigation bar can be aligned to the left, just by changing the float – and the content and sidebar can switch sides just by changing their floats.

You’ll notice I’ve got borders around the divs. I personally find these useful when doing the initial design of a site.  It helps put all the element into perspective, and gives a great visual representation of the box model and how things are truly positioned.

Finally, I’ve included a slight hack that makes the scrolls bars stay visible in Firefox, even if the content doesn’t extend beyond the page.  That way, if you navigate between pages that have different page heights, the site doesn’t “jump” to the left or right.

Check out the demo here, or download the source files here.  It’s totally free to use and abuse, for any purpose whatsoever, with no restrictions.

Here are some things I’d like to include on this blog: tips and tricks for business web design, experiments in search engine optimization, links to sites I find useful, personal rants/editorials about anything web or technology related. Another goal I have is to create and release free Wordpress themes or generic web designs.