I'm trying to create a definition list with floated <dt>s and <dd>s...see
example here:http://geniuscar.com/tests/def-list-float.html
Essentially, I want preserve this markup:
<dl class="product">
<dt class="title">Title of product</dt>
<dd class="subtitle">subtitle of product</dd>
<dd class="physical">8" x 6" x 1"</dd>
<dd class="price">$225</dd>
<dd class="image">
<p>This is supposed to float left all the way at the top</p>
</dd>
</dl>
I want the <dd class="image"> block to float left all the way at the top,
with the <dt> and the rest of the <dds> lined up on the right.
So I thought the following would work, but it doesn't:
dl.product dd,
dl.product dt{
float:left;
width: 300px;
margin-left: 300px;
}
dl.product dd.image{
float:left;
width: 250px;
margin-left: -600px;
background: #ff0000;
}
The <dd class="image"> block goes to the left, but only gets pushed up one
element, so it sits alongside <dd class="price">, but it should be alongside
the <dt>. So if I just had a <dt> and one <dd> I could do this, but I don't
understand why the same thing doesn't work if there are multiple elements
there. Can anyone explain to me why this doesn't work and how I should go
about it?
Thanks,
Tim
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
