How to change form

HTML & CSS
1

My form at http://www.saccc567.com/Test/Registration2.html is OK. But what I really want is to put the “Contact Details” on the left with the “Delivery Address” on the right. Then have the "Vehicle Information below that with the “Declaration of Waiver” just to the right of that. Make sense??

Also, cannot figure out why there is so much “white space” on the right side of each category.

Well, I am not sure how to get that to happen.

Any help would be appreciated.

P.S. This was a modified example from the web.

F

2

To sum up what you need to do:

  • make every fieldset float left;
  • give every filedset a 45%-49% width
  • give clear:left to the fieldset you want to start on a new line

CSS mods:


#page {
    background: url("http://www.sitepoint.com/forums/images/saccc5bg.jpg") repeat fixed 0 0 transparent;
    margin: 0 auto;
    min-height: 100%;
    padding: 0 18px;
    text-align: left;
   [b] width: 50%;[/b]
}

fieldset {
    margin: 0 0 1.5em;
    padding: 0;
   [b]float: left;
   width: 49%;[/b]
}

fieldset.alt {
    [b]clear: left;[/b]
}

But I would change the order and put Contact and Vehicle next to each other since they will pair up better, height wise, and so will the remaining two.