Separating a form into 2 columns

Question

What I'm trying to do is separate the following form into 2 columns with a vertical divider splitting the two, but can't seem to figure it out.

Here is an image of what I want it to look like.

HTML:

<div class="container">  
  <form class="form-large">
    <!-- THIS FORM NEEDS TO BE SPLIT IN 2 COLUMNS SUCH THAT I CAN PUT CONTENT IN BOTH -->   
  </form>
</div>

CSS:

.form-large {
    max-width: 884px;
    padding: 15px 15px 10px;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #d6d6d6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

Please help!

Very similar to already answered http://stackoverflow.com/questions/9942538/is-it-correct-to-use-div-inside-form — xQbert, Feb 12 '13 at 02:44

score 1 · Accepted Answer · answered Feb 12 '13 at 02:47

1

Just add a left and a right div with display: inline-block and a set width:

http://jsfiddle.net/ExplosionPIlls/eGjPa/

You have asked for exact widths, so if you want to prevent wrapping just put white-space: nowrap on the form. Otherwise, use percentage widths or something.

answered Feb 12 '13 at 02:47

Explosion Pills

188,624
52
326
405

Just to add to this. Say the width of the form were 1000px, the left column was 640px and the right column was 300px. How would I create a space between those columns and add a vertical divider between them stretching to the height of the form? – ShadyPotato Feb 12 '13 at 19:26

score 0 · Answer 2 · answered Feb 12 '13 at 16:36

0

Make a pixel 1px X 2px .. and apply it has a vertical background

.form-large { 
    ...
    background:transparent url(1pxX2pximage.img) repeat-y scroll 0 584px;
    ...
}

answered Feb 12 '13 at 16:36

Milche Patern

19,632
6
35
52

Separating a form into 2 columns

2 Answers2