Back to CSS Tips
Preview: what the working site looks like.

dl lined up on the :

Name:
Something
Date:
Today
Weight:
120 lbs
Location:
United States

dl with nested ul

Build a love for reading at the Pre-K level!
Focus:
  • Language
  • Letter Recognition
  • Sounds
  • Listening Comprehension
Entertaining Literature
Learning Through Play
Hands On-Not Worksheets
Develop confidence and skills in Elementary!
Focus:
  • Phonics
  • Vocabulary
  • Fluency
  • Reading Comprehension
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>     
    <div id="container">
        <div id="one">
            <h1>dl lined up on the :</h1>
                <dl>
                    <dt>Name:</dt>
                        <dd>Something</dd>
                    <dt>Date:</dt>
                        <dd>Today</dd>
                    <dt>Weight:</dt>
                        <dd>120 lbs</dd>
                    <dt>Location:</dt>
                        <dd>United States</dd>
                </dl>
        <!--closes one--></div>
                <div id="two">
                <h1>dl with nested ul</h1>
                            <dl>
								<dt>Build a love for reading at the Pre-K level!</dt>
									<dd>Focus:</dd>
										<dd>
											<ul class="reading">
												<li>Language</li>
												<li>Letter Recognition</li>
												<li>Sounds</li>
												<li>Listening Comprehension</li>
											</ul>
										</dd>
									<dd>Entertaining Literature</dd>
									<dd>Learning Through Play</dd>
									<dd>Hands On-Not Worksheets</dd>
								<dt>Develop confidence and skills in Elementary!</dt>
									<dd>Focus:</dd>
										<dd>
											<ul class="reading">
												<li>Phonics</li>
												<li>Vocabulary</li>
												<li>Fluency</li>
												<li>Reading Comprehension</li>
											</ul>
										</dd>
                            </dl>
                <!--closes two--></div>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 600px;
	margin: 30px auto;
}
#one, #two {
	margin: 20px 0 0;
	padding: 20px;
	background: #ccc;
}
h1 {
	font-size: 1.2em;
	color: #006600;
	text-decoration: underline;
}
#one dt {
	width: 100px;
	padding: 0 5px 0 0;
	float: left;
	text-align: right;
}
		#two dt {
			font-size: 1.2em;
			margin: 30px 0 10px 30px;
		}
			#two dd {
				font-size: 0.9em;
				margin: 0 0 0 60px;
			}
				#two ul.reading {margin: 0 0 0 20px;}