I'm trying to do a two column "form" layout based on article here:
http://www.alistapart.com/stories/practicalcss/
The idea is to have a label, and a value using definition list markup.
I float the dt left, and the dd right with fixed widths for each. This
works fine in both IE and FF until I have a <br> elements within the dd
elements. IE does not clear subsequent dt's, and they are not floated
beneath the multiline dd element, instead they show up directly below
the previous dt.
I'm really trying to avoid a table based approach, but I'm unable to
figure this out. Anyone have an idea as to why the sample below is
rendering like this in IE? Any help is appreciated. Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My Page Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
/* detail view */
.detail_view {
margin: 0;
padding: 0;
}
.detail_view div {
float: left;
padding: 5px;
width: 100%;
margin: 0;
}
.detail_view dl {
margin: 0;
padding: 0;
width: 100%;
clear: both;
float: left;
}
.detail_view dt {
margin: 0;
padding: 0;
float: left;
font-weight: bold;
width: 35%;
clear: both;
display: inline;
}
.detail_view dd {
margin: 0;
padding: 0;
float: right;
width: 65%;
}
.detail_view dd div {
clear: both;
display: block;
background: yellow;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<div class="gutter">
<form method="post" action="#">
<div class="detail_view">
<dl>
<dt>Address:</dt><dd><div>IE won't clear birthday
label<br/>float</br>properly!</div></dd>
<dt>Birthday:</dt><dd>Mar. 2, 2000</dd>
<dt>Sex:</dt><dd>Male</dd>
<dt>Social Security:</dt><dd>123-45-6789</dd>
</dl>
</div>
</form>
</div>
</div>
</body>
</html>
