<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>floating</title>
</head>
<style>
#sweden {
float: left;
width: 300px;
padding: 10px 0;
border: 2px solid #C8CDD2;
}
#sweden dl {
float: left;
width: 260px;
margin: 10px 20px;
padding: 0;
display: inline; /* fixes IE/ WIn double margin bug */
}
#sweden dt {
float: right;
width: 162px;
margin: 0;
padding: 0;
font-size: 130%;
letter-spacing: 1px;
color: #627081;
}
#sweden dd {
margin: 0 0 0 98px;
padding: 0;
font-size: 85%;
line-height: 1.5em;
color:#666;
}
#sweden dl dd.img {
margin: 0;
}
#sweden dd.img img {
float: left;
margin: 0 8px 0 0;
padding: 4px;
border: 1px solid #D9E0E6;
border-bottom-color: #C8CDD2;
border-right-color: #C8CDD2;
background: #fff;
}
/* reverse float */
#sweden .alt dt {
float: left;
}
#sweden .alt dd {
margin: 0 98px 0 0;
}
#sweden .alt dd.img img {
float: right;
margin: 0 0 0 8px;
}
</style>
<body>
<div id="sweden">
<dl>
<dt>Purple</dt>
<dd class="img"><img src="purple.jpg" width="80" height="80" alt="Purple" /></dd>
<dd> Royal color </dd>
</dl>
<dl class="alt">
<dt> Gray</dt>
<dd class="img"><img src="gray.jpg" width="80" height="80" alt="Gamla Uppsala" /></dd>
<dd> Cool color</dd>
</dl>
<dl>
<dt> Teal</dt>
<dd class="img"><img src="teal.jpg" width="80" height="80" alt="Teal" /></dd>
<dd> Cute color </dd>
</dl>
</div>
</body>
No comments:
Post a Comment