reeth reeth - 17 days ago 5
CSS Question

How to align text fields in div

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 tried to do this but it just won't come out correct. http://jsbin.com/izuwi3/edit

Answer

I put this together really quickly, so it can definitely be improved upon, but how about something like this?

http://jsfiddle.net/LBcp5/1/

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.

Comments