Skip to main content
CSS is fun and cool and I like it.
Article

Using Divs Inside Tables

Despite their status as mortal enemies, divs and tables can work together if you need them to. Because of the ability to use vertical centering in tables, it is a somewhat popular technique to use a single-celled table with both horizontal and vertical centering to absolutely center your page content in a browser window (mostly only useful for fixed-size content).

One important thing to remember when putting a div inside of a table is that the div needs to live … Read article

Article

The How and Why of Clearing Floats

Update: A more comprehensive article on floats is now out: All About Floats

You've heard of "clearing floats", but do you really understand it? The whole problem is that floated objects do not add to the height of the object the reside in properly. As you can see below, these divs with the class "floated_box" are within the div "main_container", yet on the page they are outside that container div.

#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid 
Read article
Article

Left Align and Right Align Text on the Same Line

It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line. For example, in a footer, where you might want to have copyright info on the left and webmaster info on the right. Here is how you might want your HTML:

<div id="textbox">
  <p class="alignleft">Text on the left.</p>
  <p class="alignright">Text on the right.</p>
</div>

If you were to then give your CSS classes alignleft and … Read article

Article

Give Your Images Space and Captions For Better Layout

You can always float your images to one side or the other and give them a bit of a margin just by giving them a class like "floatright" and declaring that class as:

.floatright {
float: right;
margin: 5px;
}

That's fine and dandy, but let's switch things up a bit in order to give us more control as well as add captions to the images. This adds a nice touch to any web article and a more professional layout … Read article

Article

Stylesheets for Printing

Jason from 37 Signals has a great post up on the Signal vs. Noise blog on how simple print stylesheets can be and still be effective. Basically using display: none; enmasse. People don't need your header or your footer or your navigation. If they are trying to print your webpage they are trying to print the content, so give it to them.

Here is the theory:

#header, #navigation, #footer, .any, .random, .junk, .on, .your, .page, .that, .shouldnt, .print {
  display: 
Read article
Article

Homebase, a Simple Free Template for All

If you are just getting started with CSS, a great way to begin is by downloading a template and playing around with things and seeing what happens. You have to be careful though, some templates are so overly complicated that you might just drown while sifting through everything.

Don't worry though, we got you covered. Here is a entirely CSS template for a simple website that you can download, tweak, revamp, whatever you want! We're calling it Homebase, because … Read article

Article

ID’s Cannot Start With a Number

Tempted to use something like "1800number_box" for a ID? Don't. Because it won't work. Class identifiers are allowed to start with a number, but ID identifiers are not.

That is all.

BUT

If you have already existing HTML using it that way that you absolutely can't change, you can access it with:

[id='1800number_box'] {
 /* does work */
}

#1800number_box {
  /* doesn't work */
}

/* Or, you can "escape" the number, which looks funky but works: */
#\31 
Read article
Article

CSS3 Multiple Backgrounds Obsoletes Sliding Doors

With browsers that support the CSS3 Spec (Safari only at the time of this writing) there is no longer need for the sliding doors technique to create horizontally expanding elements that utilize background images. The ability to assign multiple background images to a single element makes quick work of the problem. Assign an image that positions to the left, a repeading middle image, and an image that positions to the right, like so:

li.expanding {
	background: url('left.jpg') top left no-repeat,
			
Read article
Article

Including Navigation Code On All Pages (Even With Current Navigation Highlighting!)

You've seen this a million times:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Contact us</a></li>
</ul>

The classic menu HTML which you can transform into any number of beautiful things through CSS. You could include that in all your pages by putting it into it's own HTML file (like "menu.html") and including it on your pages with some kind of simple include statement like this PHP snippet:

<?php include_once("menu.html"); ?>

Now you need to add a class so you can … Read article

icon-link icon-logo-star icon-search icon-star