CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ShadyPotato
ShadyPotato

Reputation: 257

Separating a form into 2 columns

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!

Upvotes: 0

Views: 3403

Answers (2)

Milche Patern
Milche Patern

Reputation: 20452

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;
    ...
}

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

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.

Upvotes: 1

Related Questions