Back to CSS Tips
Preview: what the working site looks like.
Type of Place
Arcades
Bars/Nightclubs
Outdoor/Patio
Restaurants
Sports Bars
Take Out
WiFi Hotspots
Things to Do
  • Happy Hour
  • Drunken Horseshoes
  • Darts
  • Big Screen TV
  • Arcade Games
  • Pull tabs
  • Texas Hold'em
  • Wi-Fi
The markup
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Untitled Document</title>
</head>
<body> 
    <div class="entry">
        <dl class="left">
            <dt>Type of Place</dt>
                <dd>Arcades</dd>
                <dd>Bars/Nightclubs</dd>
                <dd>Outdoor/Patio</dd>
                <dd>Restaurants</dd>
                <dd>Sports Bars</dd>
                <dd>Take Out</dd>
                <dd>WiFi Hotspots</dd>					
        </dl>
                    <dl class="right">
                        <dt>Things to Do</dt>
                            <dd>
                                <ul class="list">
                                    <li>Happy Hour</li>
                                    <li>Drunken Horseshoes</li>
                                    <li>Darts</li>
                                    <li>Big Screen TV</li>
                                    <li>Arcade Games</li>
                                    <li>Pull tabs</li>
                                    <li>Texas Hold'em</li>
                                    <li>Wi-Fi</li>
                                </ul>
                            </dd>
                    </dl>
    <!--end entry--></div>
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
.entry {
	width: 455px;
	margin: 50px auto;
	overflow: auto;
}
dl {width: 220px;}
	dt {
		background: #ccc;
		text-align: center;
		font-weight: bolder;
	}
		dd {padding: 0 0 0 20px;}
.left {float: left;}
.right{float: right;}
	ul.list {
	padding: 0;
	list-style: disc;
	}