reeth reeth - 1 year ago 84
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.

Answer Source

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

... 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download