Page styling: alternative to using floats

Question

Whenever I want to place elements next to each other I tend to use floats on them. like using two divs with float:left on them. I am wondering if that is the best strategy or there is a better alternative out there.

This is an example code

 <div>
  <div style="float:left">
    <p>Alphabet</p>
    <select  style="width: 200px;">
     <option>A</option>
     <option>B</option>
    </select>
    </div>
      <div style="float:left;  margin-left:20px;">
         <p>Number</p><input type="text" value="123" />
      </div>
 </div>

What else can I improve in the above code. Is that <p> really necessary or should I use some other tag.

A Live Example

Answer 1

An alternative could be the use of display:inline-block; and the use of labels like in this example.

Labels are great for devices with limited display capabilities, expecially handheld, since clicking on them will activate the specified field. You should always use them.

Anyway, I don't see the point in not using floats. If you know how to use them correctly, they are great and are compatible across all browsers.

Answer 2

Use for example style="display:inline-block"

And about your second question:

<div style="display:inline-block">
   <label for="alphabet" style="display:block;">Alphabet</label>
   <select id="alphabet" style=" width: 200px;">
     <option>A</option>
     <option>B</option>
   </select>
</div>

using label is more semantic, and applying display:block to it, makes it span the whole width.

Also try not to use inline css.