CODEWITHSUNDEEP
css
junaidp
junaidp

Reputation: 11201

how to make elements Aligned inside div

I have a div with few elements , my label and textbox inside a div are not well aligned , You can see the screenshot .. Any idea to align these legal name and business name and textbox , so all the textboxes should start from the same point

thanks

enter image description here

Upvotes: 0

Views: 120

Answers (4)

cimmanon
cimmanon

Reputation: 68319

You'll have to ask yourself which is worse: using a table or using enough mark-up that it looks like a table but with spans/divs instead of trs/tds. I think tables are fine in this instance (if you've worked with relational databases, it's not uncommon to have lots of tables with only 2 columns), others will assure you that it is evil.

You can use a width on your label elements as already suggested or you can use slightly less evil CSS tables.

div.pseudo-row { display: table-row }
/* input might need to go in a container and have the container set to table-cell instead */
div.pseudo-row label, div.pseudo-row input { display: table-cell }

<div class="pseudo-row">
<label for="first-item">First item</label>
<input type="text" id="first-item" />
</div>

<div class="pseudo-row">
<label for="second-item">Second item</label>
<input type="text" id="second-item" />
</div>

http://www.vanseodesign.com/css/tables/

For the record, I would just use tables in this instance and save the CSS table display properties for another day.

Upvotes: 0

Viliam B&#250;r
Viliam B&#250;r

Reputation: 2214

You could align them using an invisible table.

<table border="0">
<tr><td>Legal Name:</td><td><input type="text"></td></tr>
<tr><td>Business Name:</td><td><input type="text"></td></tr>
</table>

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

Here's one way you can do it:

http://jsfiddle.net/FmKfP/

Upvotes: 0

albertedevigo
albertedevigo

Reputation: 18411

Set width for your labels and inputs:

.the-label {
    width: 160px;
}

.the-input {
    width: 220px;
}

Upvotes: 1

Related Questions