ansaurus

Question

Answer 1

A:

It might be possible (have 2 DIVs in each DL, and assign them widths), but why get hung up on ? this looks like an ideal application of a TABLE.

DVK 2010-01-21 15:32:45

<dl>'s use <dt> and <dd>'s; Not DIV's, and dl's are for definition lists; so dl's are a good choice I guess...

D4V360 2010-01-21 15:36:57

-1 for suggesting tables for something that is clearly not a table.

Williham Totland 2010-01-21 15:38:59

Answer 2

+2 A:

Sure, you can go with something like this (offcourse with your CSS from an external source):

<style type="text/css">
    dt {
        width: 200px;
        float: left;
        clear: left;
    }   
</style>

<dl>
    <dt>Test:</dt>
    <dd>Hallo, this is a test</dd>
    <dt>Test:</dt>
    <dd>Hallo</dd>
    <dt>Test:</dt>
    <dd>Hallo</dd>
</dl>

D4V360 2010-01-21 15:35:44

This will look funny if there is more than 1 `dd` per `dt`. To fix it, you can add another CSS rule `dd {margin-left:200px;}`

naivists 2010-01-21 15:48:03

@naivists: This will also be needed to deal with longer <dd> items which fall onto subsequent lines. You will see that I added this as part of my answer prior to your comment :)

Splash 2010-01-21 15:51:37

Answer 3

+3 A:

D4V360 was almost there. This variant will handle longer entries which fall over onto subsequent lines (like the example in the linked image):

<style type="text/css">
    dt {
        width: 200px;
        float: left;
        clear: left;
    }
    dd { margin-left: 200px; }
</style>

<dl>
    <dt>First Item</dt>
    <dd>This is the first item</dd>

    <dt>Second Item</dt>
    <dd>This is the second item</dd>

    <dt>Third Item</dt>
    <dd>Lorem ipsum dolor sit amet... lots more text here...</dd>

    <dt>Fourth Item</dt>
    <dd>Last item</dd>
</dl>

Note that the margin-left value for the dd element should be the same as the width value of the dt element. This is what causes subsequent lines for longer entries to start from the correct point. Adjust both values together to attain your desired spacing.

Splash 2010-01-21 15:45:43

I only saw this when I was about to hit "Post Your Answer". It's correct. It even seems to work with other floating elements around. IE6 has some margin issues as usual.

Álvaro G. Vicario 2010-01-21 15:59:08

Yeah, I just don't bother with IE6 issues these days unless its specifically called for. In that case, I guess the usual conditionally-included weirdo stylesheet can be used :)

Splash 2010-01-21 16:00:59

Almost OK, but now it looks like that: http://img32.imageshack.us/img32/7740/nowlook.png - compare that image with the first one.

DJPython 2010-01-21 18:39:33

DJPython: that should not be possible. The dd rule is there to specifically stop that issue. Can you link to the affected page? I can only assume there's some other issue affecting it. Also, how are you controlling the width of the list (it's not full width)?

Splash 2010-01-22 08:16:33

Sorry, my bad - I forgot to delete another <dd> definition. Now it works, thanks.

DJPython 2010-01-22 11:53:27

Fair enough, I thought it might be just something like that. Glad it worked out for you. You may like to accept the answer using the tick above if it helped you out. Welcome to SO btw :)

Splash 2010-01-22 12:14:17

Answer 4

A:

This basically works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html lang="en">
<head><title></title>
<style type="text/css"><!--
dt{
    border: 1px solid green;
    float: left;
    clear: left;
    width: 200px;
    margin: 0 0 10px 0;
    padding: 0;
}
dd{
    border: 1px solid red;
    margin: 10px 0 10px 210px;
    padding: 0;
}
--></style>
</head>
<body>

<dl>
    <dt>Praesent dapibus posuere nulla:</dt>
        <dd>Eu varius lorem fringilla a.</dd>
    <dt>Integer id magna ut orci condimentum:</dt>
        <dd>Quisque pulvinar purus quis nibh luctus fermentum.</dd>
        <dd>Donec pretium quam id quam bibendum quis blandit tellus blandit.</dd>
        <dd>Vestibulum dignissim nunc et felis luctus dictum.</li>
    <dt>Cras nec nisl in libero:</dt>
        <dd>Vulputate dignissim a commodo ligula.</dd>
    <dt>Integer ut orci vitae lectus eleifend mattis:</dt>
        <dd>Suspendisse ut lorem diam, vel pharetra urna. Vestibulum ultricies, magna at placerat lacinia, nibh mauris pharetra risus, et imperdiet arcu elit sit amet arcu. Sed enim turpis, sodales non facilisis sed, mollis sed quam. Integer quam neque, dapibus et viverra sed, pulvinar vitae odio. Vestibulum hendrerit pellentesque tortor a facilisis.</dd>
</dl>

</body>
</html>

It triggers the Double Margin Float Bug in IE6, though.

Álvaro G. Vicario 2010-01-21 15:55:48

ansaurus

tags:

views:

answers:

Little problem with styling <dl>

related questions