How to align the top lines of two <div></div>?

Question

I want the top lines of two <div></div> to be aligned horizontally, how to do it?

Answer 1

Float them in a container.

.parent div { float: left; width: 50%; }

<div class="parent">
    <div>1</div>
    <div>2</div>
</div>

Note: The sum of the width of the child divs can not be greater than 100% of the parent div, including margin and padding.

Alternative

If maintaining flow with the page isn't a requirement, and all that really matters is aligning, them, the divs can always be positioned absolutely.

.abs { position: absolute; top: 100px; width: 50px; }
.left { left: 0px; }
.right { left: 50px; }

<div class="abs left">1</div>
<div class="abs right">2</div>

Answer 2

In response to "is there another way to do it", sure you could use display: inline but you have a bunch of hacks to remember to get it to work in IE6/7. This way is generally better (but it all comes down to the individual circumstances)

<style type="text/css">
    .keeper {
        overflow: hidden; /* expand to contain floated children */
    }

    .keeper div {
       width: 200px;
       height: 30px;
       float: left;
       border-top: 1px solid red; /* so you can see the 'tops' */
    }
  </style>  
    <div class="keeper">
       <div>
       </div>
       <div>
       </div>

    </div>