Page Layout: An Alternative to Using Floats

Question

Whenever I want to place elements next to each other, I try to use floats on them. for example, using two divs with a float: left on them. I am wondering if this is the best strategy or if there is a better alternative.

This is sample 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 this <p> really necessary or should use some other tag.

Living example

Answer 1

An alternative would be to use display:inline-block; and the use of labels such as this example.

Shortcuts are great for devices with limited display capabilities, especially pocket ones, since clicking on them activates the specified field. You should always use them.

In any case, I see no reason not to use floats. If you know how to use them correctly, they are great and compatible in 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 applies display:block to it so that it spans the entire width.

Also try not to use inline css.

Answer 3

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

This is very well supported, and the "built-in block" will give you problems if you don't crack it for older browsers .. when you could use float: left; all the time.