A CSS Walkthrough, part 6

In the previous part of this walkthrough, I applied custom styling to the links.

Advanced Techniques

I will now use some advanced CSS techniques to possibly improve the visual appearance of the page.

Columnar DL

I've decided that I would like to make the definition list (the list in the "About Me" section) into columns. The definition list has seperate tags for the terms (DT) and their definitions (DD), with one term corresponding to one definition, respectively. Therefore I only have to float these two elements left and apply the widths I want to get columns. The relevant CSS is:

dt, dd { float:left; }

dt { 
	width:20%; 
	clear:left; 
	text-align:right;
	margin-bottom:.5em;  
}

dd { 
	width:60%;
	margin-bottom:.5em;  
}
		

I applied the float:left to both the DT and the DD, and I then gave DT a width of 20% and a right-hand-side text alignment. I then gave the DD a 60% width and both get a bottom margin that is enough to provide a space between each DT, DD pair and the next one.

I also had to apply clear:left to each DT so that they would always appear undernead the previous pair of DT/DD rather than sitting next to it. Otherwise each DT would probably float up next to the previous DD and things would look very wrong.

As with the two columns we made previously, it is very important to clear this float after the DL, so I have added another BR tag with class "clear" in the HTML. This CSS is located in step7.css and can be viewed at step3.html.

We now have an interesting way of displaying our "About Me" section. In the next part I will show two more advanced techniques. Move on to part 7.