I am trying to align text fields in a div and make them float left so that they look like a table.
I want a layout like below:
Label1: TextField Label2: TextField Label3: TextField
Label4: TextField Label5: TextField Label6: TextField
I put this together really quickly, so it can definitely be improved upon, but how about something like this?
What I'm doing is essentially creating a container for what would be a row in a table. The way I'm doing this is as follows:
<div class="row"> // put whatever you want in here </div>
... and I'm styling this
row class with
clear: both so that each row will be on its own line. You can add
<div> elements within each row, as many as you want, and floating them to the left or using
display: inline to get the effect you want.
So when you want multiple rows, you create multiple of these
row containers. Check out the jsFiddle demo above for an example.
I hope this helps.