CODEWITHSUNDEEP
htmlcss
tedled
tedled

Reputation: 21

How to make form with two vertical columns of inputs

I am wanting to make a page with two columns of input forms.

For example texboxes on left and checkboxes on the right.

How could I do this

#left
{
  float:left;


}

#right
{
float:right;
}

Upvotes: 1

Views: 6089

Answers (4)

Dave
Dave

Reputation: 6179

http://jsfiddle.net/kFcDE/7/

HTML:

<!-- HTML with text on left, and check boxes on right -->
<div>
  <form method="post" action="url/to/your/server/here">

    <!-- First float left -->
    <div class="float-left t-area-wrapper">
        <textarea name="text"></textarea>
    </div>

    <!-- Second float left -->
    <div class="float-left c-box-wrapper">
        <input type="checkbox" name="box1"></input>
        <input type="checkbox" name="box2"></input>
    </div>

    <!-- Clear - notice this is a sibling of the els with floats -->
    <div class="clear"></div>
  </form>
</div>


<!-- HTML with check boxes on LEFT, and text on RIGHT -->
<div>
  <form method="post" action="url/to/your/server/here">

    <!-- FIRST float left -->
    <div class="float-left c-box-wrapper">
        <input type="checkbox" name="box1"></input>
        <input type="checkbox" name="box2"></input>
    </div>


    <!-- SECOND float left -->
    <div class="float-left t-area-wrapper">
        <textarea name="text"></textarea>
    </div>

    <!-- Clear - notice this is a sibling of the els with floats -->
    <div class="clear"></div>
  </form>
</div>

CSS:

/* Use this class for borders/padding/etc to 
    position the text elements way you like */
.t-area-wrapper {

}

/* Use this class for borders/padding/etc to
   position the checkboxes the way you like */    
.c-box-wrapper {

}

.float-left {
    float: left;
}

.clear {
    clear: both;
}

Don't forget to add a clear div as the last sibling of floated elements when using float....

Upvotes: 1

ThatMatthew
ThatMatthew

Reputation: 1248

Set the width of each column (#left and #right) to 49%. This will make them each take up half the screen, with a little spacing in the middle. (Also, if both are set to 50%, you can have rounding issues that bump one of the columns down below the other.

Upvotes: 0

George Cummins
George Cummins

Reputation: 28906

Inputs are inline elements, so they will stay side-by-side unless you insert a break or block-level element:

<input type="text" /><input type="checkbox"><br /><input type="text" /><input type="checkbox">

This will produce two columns of inputs, with no styling needed.

Upvotes: 0

Jonah Katz
Jonah Katz

Reputation: 5288

Two divs. One with the style:

.left_div_input_boxes {

width:50%;
float:left;

}

And one with 

.right_div_check_boxes {

    width:50%;
    float:right;

    }

http://jsfiddle.net/z7bQ6/

Upvotes: 0

Related Questions