css div kolumner

Nu har jag en fråga, för jag har sökt runt på alistapart, wf mm mm men hittar inget.
Jag har en sida där jag har rubrik samt vanlig text under som är en indragen en liten bit.

Nu är det så att när jag lägger till tex att jag vill ha två kolumner:

<div style="float: left; width: 100px;">1111</div>
<div style="float: left; width: 200px;">22 22</div>

så funkar det MEN även det hoppar in en till bit till höger.

Gjorde ett annat exempel:

<h3><span>Contact us</span></h3>
<p><span>

<div id="div">			
  <ul class="left">
    <li>Tomas W</li>
    <li>Tel: +46 70 1234567
    <li>Email</li>
  </ul>
  <ul class="right">
    <li>Johan S</li>
    <li>Tel: +46 07 7654321</li>
    <li>Email</li>
  </ul>			
</div>
.
...

#div {width: 400px;}
  
  ul.left {
    float: left;
    text-indent:-15px;
    width: 200px; 
    margin: 0px;
    padding: 0px 0px;
    border: 0px none; 
    position: relative;
    list-style-position: inside;
    list-style-type: none;
	border-top: 1px solid #CCC;
	border-left: 1px dotted #CCC;
	border-right: 1px dotted #CCC;
	border-bottom: 1px dotted #CCC;
  }
  
  ul.right {
    float: right;
    width: 200px; 
    margin: 0px;
    padding: 0px 0px;
    border: 1px none; 
    list-style-position: inside;
    list-style-type: none;
	border-top: 1px dotted #CCC;
	border-left: 1px dotted #CCC;
	border-right: 1px dotted #CCC;
	border-bottom: 1px dotted #CCC;
  }
  
  .no-space {
    margin: 0px;
    padding: 0px;
  }

Detta får jag som jag vill men ändå blir det indraget mer än den vanliga texten, varför?
Jag har provat med olika margin/padding men inte då.
Kör jag text-indent: -15px; får jag texten där jag vill ha den men bara på texten "Tomas W".

Skriver jag utan <div> så blir texten där jag vill ha den, precis som vanlig text men så fort div kommer med i bilden hoppar den in en ännu ett "stycke".

Bifogar en bild för att visa hur det kan se ut.
Allt annat på sidan fungerar som jag vill men det blir problem då jag vill ha in två simpla kolumner.