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>
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,olordl) for my forms.Don’t forget to checkout A List Apart’s Prettier Accessible Forms article, which gives a good start for styling forms.