Cli Dt. DD implementation of the left and right layout simple example

This is an e-mail today asked a question, the first idea is to use a UL list to achieve, but in this case there are two more troublesome places:
1, if using UL also layout, the right column is more troublesome;
2, the text outside the border self-adaptation is more troublesome;
3, it is possible to set the height of death;
So, take a look at this layout carefully, think about it or use DL.DT.DD to make it reasonable:
1, the layout reasonable some;
2, the future expansion is very convenient;
3, CSS must be very few;
Try to write a write, look at the line! Within a controllable range!
Layout points Of course needless to say:

CSS section:

<style>  *{margin:0; padding:0;}  body{font-size:12px; line-height:1.8; padding:10px;}  Dl{clear:both; margin-bottom:5px;float:left;}  dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}  dd{position:absolute; right:5px;}  h1{clear:both;font-size:14px;}  </style>
Look at the effect:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 If it's wide? 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 Related examples, I have written before: 
 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
 