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/

Reply via email to