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

Solution 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.

Solution 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.

Comments

[Admin]

is inline block supported in IE7 and later?

[Gideon]

yes, but you might have to apply a hack: grasshopperpebbles.com/css/css-inline-block-ie7-hack

[Admin]

inline css was an example.. yes I avoid it

[Admin]

the problem with that is i have to use a clear:both after that.. anyway around it??

[Joonas]

@Amber what is the problem that you bump into by using clear

[Admin]

if I dnt use a clear my div that follows the parent div is now rendered incorrectly