CODEWITHSUNDEEP
htmlcsslayouthtml-table
sparcut
sparcut

Reputation: 825

Is this layout possible without tables or predefined widths?

So I have been tossing around this type of centering for a long time now. I am trying to align to a certain point in the center but having relation to the elements around it. To make this easier to understand, take a look at this codepen: http://codepen.io/sparcut/pen/jAkkdv

This code is basically a simple table with the width set to 100% of its parent, in this case, the body. Then there are two columns, the labels and inputs being aligned right and left respectively. Blow is a quick sample:

HTML

<table>
<tr>
    <td>Given Name:</td>
    <td><input type="text"></td>
</tr>
<tr>
    <td>Surname:</td>
    <td><input type="text"></td>
</tr>
<tr>
    <td>Street Address:</td>
    <td><input type="text"></td>
</tr>
<tr>
    <td>City:</td>
    <td><input type="text"></td>
</tr>
<tr>
    <td>Phone:</td>
    <td><input type="text"></td>
</tr>

CSS (Compiled Sass)

table {
  width: 100%;
}

tr {
  width: 100%;
}

td {
  width: 50%;
}

td:first-child {
  text-align: right;
}

td:last-child {
  text-align: left;
}

It hurts me to use table layouts or floats, but I cannot think of/find another feasible way to achieve this effect. I also have tried having fixed widths but I find it much nicer and fluid being able to achieve varying widths.

Not sure what the downside to using tables in this situation as I put it through cross-browser testing and they all seem to work fine (Links Below).

Cross-browser 1 - Generic Browsers

Cross-browser 2 - Interenet Explorers + Oldest Opera Avalible

Upvotes: 0

Views: 35

Answers (2)

btrballin
btrballin

Reputation: 1464

Instead of the table, you can try a <form> element. It essentially accomplishes the same thing. Not sure what why you hate using tables, because they are a great way to display all the elements uniformly. I personally don't see any additional benefit from using form element over the table element for your situation.

HTML form element

Upvotes: 1

Taj Khan
Taj Khan

Reputation: 589

It's quite easy i think see the fiddle https://jsfiddle.net/yxk09odg/

<div>
  <div class="inline-block">
    Given Name:<input type="text"><br>
Surname:<input type="text"><br>
Street Address:<input type="text"><br>
City:<input type="text"><br>
Phone:<input type="text">
  </div>
</div>

with minimum styling like this

div{
  text-align:center;

}
.inline-block{
  display:inline-block;
  text-align:right;
}

Upvotes: 2

Related Questions