Question about CSS form layout

Question

I am trying to learn more CSS. I inherited a nice layout that I have been using for a little while now and I want to keep the CSS going instead of mixing tables in there. I am currently designing a separate form to handle side by side textboxes. I was using span tags to keep these textboxes side by side but now I'm wondering what the best practice for this type of design would be. Should I use a div container and spans as I was doing or should I just use straight divs and float them as in my example?

<div style="overflow:hidden; width:100%; border:1px solid #000;">
  <div>
    <div style="float:left"><input type="text" /></div>
    <div style="float:right"><input type="text" /></div>
  </div>

  <div style="clear:left">
    <div><input type="text" /></div>
  </div>
</div>

Answer 1

As far as markup choices are concerned, it is always a good hint to test your page in a text browser (Lynx, Links, Elinks), and check how it is displayed there. I am usually using some kind of list (ul, ol or dl) for my forms.

Don’t forget to checkout A List Apart’s Prettier Accessible Forms article, which gives a good start for styling forms.

Answer 2

I'm not entirely sure what you're trying to achieve in terms of layout, but you can get the same result using a lot less markup:

  <div style="overflow:hidden; width:100%; border:1px solid #000;">
    <div>
      <input type="text" style="float:left" /><input type="text" style="float:right" />
    </div>
    <div style="clear:left">
      <input type="text" />
    </div>
  </div>

Make sure you move those in-line styles into class or id definitions too. Avoid having css definitions in your markup.