CODEWITHSUNDEEP
formscss
edgarmtze
edgarmtze

Reputation: 25038

How to align column and rows in form

I have a form, and want that a row has 2 or 3 columns, to do so I am doing

.formcol {
     float: left;
      padding: 2px;
}

.formcol label {
     font-weight: bold;
     display:block;
}

how to get something like this

x

here is the fiddle

Upvotes: 0

Views: 1923

Answers (2)

Manish Mishra
Manish Mishra

Reputation: 12375

see i made following changes to your html strucutre:

 <div class="formcol row">
                <div class="formcol form-left middle">
                    <input type="text" id="col1x" size="12" name="col1x" />
                    <label for="col1x" >col1x</label>
                </div>
                <div class="formcol form-right middle">
                    <input type="text" id="col2x" size="12" name="col2x" />
                    <label for="col2x">col2x</label>
                </div>
 </div>

and added one extra class of mine :

.middle > label
            {
                text-align: center;
                font-weight: bold;
                font-size: 15px;
                color: black;
            }

and it works: fiddle

for 3 columns: make your structure like:

<div class="formcol row">
                <div class="formcol form-left middle">
                    <input type="text" id="col1x" size="12" name="col1x" />
                    <label for="col1x" >col1x</label>
                </div>
                <div class="formcol form-left middle">
                    <input type="text" id="col1x" size="12" name="col1x" />
                    <label for="col1x" >col2x</label>
                </div>
                <div class="formcol form-right middle">
                    <input type="text" id="col2x" size="12" name="col2x" />
                    <label for="col2x">col3x</label>
                </div>
</div>

(it uses all your existing class, plus one of mine)

Upvotes: 1

klewis
klewis

Reputation: 8350

Use CSS and HTML to float 2 or 3 div element blocks. Within each div section place your form input fields. Then simply remember to clear your floats when you are done.

Also within your CSS, control the height of each input field to be the same all around (i.e. 

.my-input {
  height:20px;
}

and associate the class name .my-input to every input field you have on the page. This should visually give you the sense that there are rows of input fields due to the equal height of each field.

Upvotes: 0

Related Questions