Timothy Kelty wrote: > 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?
Have you tried using a negative top margin value on dd.image? ______________________________________________________________________ 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/