Get Floats to Automatically Clear in IE6

I’m working with definition lists. The term and definition are both one line, and I’d like to get them to display on the same line. My page is located at http://chrisshields.net/test.php

I’m floating both the dt and the dd to the left, and I’m giving the dt a clear:both rule.

Here’s what I want, and what most browsers seem to do:

Here’s what IE6 does:

I tried applying zoom:1 to anything and everything, but I can’t get IE6 to behave. Any suggestions?

Total guess as I’ve never messed with dd and dts. They remind me of tr and tds. Though I now their nothing alike. Try margin-right:100% instead of clear

Try this:

dl { 
padding:1em 1em 0; 
background:pink; 
overflow:hidden;
zoom:1;
}

dt { 
float:left; 
margin-right:.5em; 
background:lightgreen;
}

dd { 
background:lightblue; 
margin-bottom:1em; 
}

I’d also add this extra bit on to Vics code above.:slight_smile:


dd {
background:lightblue;
margin-bottom:1em;
[B]overflow:hidden;
zoom:1.0;[/B]
}


That will keep the dd in a rectangular block rather than wrapping underneath if the content is longer.

I love these forums.

Victorinox’s solution works perfectly. Thanks.