Page styling: alternative to using floats

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 ther开发者_如何学Ce.

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

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.

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.

Use float: left;. There is no reason not to use it in this situation.

It is Very well supported and "inline-block" will give you trouble unless you hack it for older browsers.. when you could have used float: left; all along.