This article will self-destruct in twenty seconds. Okay, not really; it will probably take you longer than that to read it, and you may even want to use it as a reference. In this mind-blowing episode, we discuss the many classification properties in CSS, all of which give you the ability to determine how and where your elements are displayed.
There are quite a few ways to display elements in CSS: inline, block, run-in, compact -- the list goes on and on. All those terms are probably a whole bunch of jibba-jabba to you at the moment, but don't worry fool! With the help of my good buddy Mr. T, we will clear it up for you in a jiffy:
<h3>A Horse is a horse</h3>
<h3>Of course, of course</>
<h3>Unless that horse is at McDonald's<h3>
<h3>In which case it's lunch.</h3>
The above uses an inline display, which shows the elements without any distance between them. The above displays as:
A Horse is a horseOf course, of courseUnless that horse is at McDonald'sIn which case it's lunch.
In the next example we will use the display block to force several spans to appear on several different lines, as opposed to together:
<span>A Horse is a horse</span>
<span>Of course, of course</span>
<span>Unless that horse is at McDonald's</span>
<span>In which case it's lunch.</span>
There are other ways to use the display properties, and here they are in a list:
Note that browser support of display is iffy, so be sure to check that your page looks right in multiple browsers (you should really be doing this anyway, you elitist swine!)