Question

The way I like for my code to displayed is

Name1      
Name2 Jim

The way it is doing now is:

Name1 Name2  Jim

How can I change it so that it looks like the way I want it to?

CSS

.display-left {
     float: left; 
     width: 200px; 
     text-align: left; 
     font-weight:bold   
}

.display-right {
     text-align: left;
}

HTML

<div class="display-left">Name1:   </div>
  <div class="display-right" > </div>
</div>
<div>
  <div class="display-left">Name2: </div>
  <div class="display-right">Jim </div>
</div>

Answer 1

Easiest way is to add a clear:left; to your .display-left class. And a float:left; to your display-right class

http://jsfiddle.net/f5cUx/3/

.display-left {
    float: left;
    width: 200px;
    text-align: left;
    font-weight:bold;
    clear:left;
}

.display-right {
    text-align: left;
    float:left; 
}

The “clear” property specifies on which sides other floating elements are not allowed.

I also just noticed you had wrapped each “row” in a div. In that case you could just put a new class on those “wrapper” divs that clears the float.

http://jsfiddle.net/f5cUx/4/