user17753 user17753 - 9 months ago 29
CSS Question

Styling dl and dt with CSS to mimic table-like presentation

I have the following issues using CSS to style some

dl
and
dt
elements. I prefer always to use very basic CSS that is compatible with IE6/IE7 and modern browsers. I am trying to get an effect, that to me should be rather simple to achieve.

Here's a stripped down version of the initial source code I am working with, to try and work on just this issue:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>

<style type="text/css">

.terms dl {
float: left;
padding-left: 0px;
}

.terms dt, .terms dd {
text-align: center;
margin: 0px;
float: left;
}

.terms dt {

border: solid blue 1px;
clear: left;
}

.terms dd {
border: solid red 1px;
margin-right: 40px;
margin-left: 40px;
}

</style>
</head>
<body>
<div class="terms">
<h1>Terms</h1>
<dl>
<dt>Term 1:</dt>
<dd>Very Long definition for this term here</dd>

<dt>Term 2:</dt>
<dd>Definition for term</dd>

<dt>Term 3 with longer term title:</dt>
<dd>Definition for term</dd>

<dt>Term 4:</dt>
<dd>Definition for term</dd>

<dt>Term 5:</dt>
<dd>Definition for term</dd>

<dt>Term 6:</dt>
<dd>Definition for term</dd>
</dl>
<dl>
<dt>Term 7:</dt>
<dd>Defintion for term</dd>

<dt>Term 8:</dt>
<dd>Definition for term</dd>

<dt>Term 9:</dt>
<dd>Definition for term</dd>

<dt>Term 10:</dt>
<dd>Very Long definition for this term here</dd>

<dt>Term 11:</dt>
<dd>Definition for term</dd>

<dt>Term 12:</dt>
<dd>Definition for term</dd>
</dl>
</div>
</body>
</html>


Here is the visual result. I styled blue and red borders so that it is more easily visualized:

enter image description here

My goal is to have all the blue and red "boxes" to have the same width no matter what the text-size set is. E.g. if a user has a default style sheet to make their text very large, it should expand accordingly. This issue does not only arise when people use their own style sheet, it also arises in IE6 when people select "text-size" other than "medium" -- it makes the text larger, and I want to be able to accommodate that.

I don't think I want to have to set a hard width on any of the "boxes", and I don't want any wrapping of text, or having the floats fall down, out of this two column style.

I can edit the answer with more pictures and examples if I wasn't clear enough.

Also, this is a related, but separate question. If the browser window is re-sized, with a table you'd expect a portion of the table to become no longer visible as you decrease the width. With this setup, you get a very strange and ugly result as seen below. How can this be avoided?

enter image description here

UPDATE

It seems there isn't a solution that does not involve giving fixed width's to the elements (and/or an encapsulating element). In addition, it seems IE6 text-resizing can only be resolved by hard setting your text to a pixel size and just not letting them re-size it.

Answer Source

you could just specify fixed width:XXpx for each of the elements like this

http://jsfiddle.net/XKaKT/1/