Putting a DIV to create an overall width in a form

Hello

Working on a form and need to constrain the overall width.

Here is a link to the test page.
http://avrparking.com/test2.html

I assume I need to wrap the form in its own div.  But if you can lead me through the steps...

Thanks

Rowby
Here's the current HTML
<link href="carwash.css" rel="stylesheet" type="text/css" />
    {jumi [hours-function.php]}
    <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Your Name:</label>
        <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_0" name="text_0" type="text" />
      </div>
      <div class="cfclear">&nbsp;
        <p>&nbsp;</p>
    </div>
    </div>
    
    <div class="form_item">
      <div class="form_element cf_datetimepicker">
        <label class="cf_label" style="width: 150px;">Drop off date:</label>
        <input class="cf_datetime" title="" size="20" id="date_1" name="date_1" type="text" />
      </div>
      <div class="cfclear">&nbsp;</div>
    </div>
    
    <div class="form_item">
      <div class="form_element cf_datetimepicker">
        <label class="cf_label" style="width: 150px;">Pick up date:</label>
        <input class="cf_datetime" title="" size="20" id="date_2" name="date_2" type="text" />
        
      </div>
      <div class="cfclear">&nbsp;</div>
    </div>
    <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Drop off time:</label>
      {jumi [drop_off_time.php]} </div>
      <div class="cfclear">&nbsp;</div>
    </div>
    <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Pick up time:</label>
      {jumi [pick_up_time.php]} </div>
      <div class="cfclear">&nbsp;</div>
    </div>
    
    <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Email address:</label>
        <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_3" name="text_3" type="text" />
      </div>
      <div class="cfclear">&nbsp;</div>
    </div>
        <div class="form_item">
      <div class="form_element cf_textbox" id="carwash_vaccum">
        <label class="cf_label" style="width: 150px;">        </label>
        <div class="carwash" id="carwashID">Come back to a shiny car. 
Let us wash and vaccum it for you on the same day as pickup!</div>
        <label class="cf_label" style="width: 150px;">Car Wash &amp; Vaccum:</label>
        <input name="carwash_vaccum" type="checkbox" id="carwash_vaccum2" value="Yes" />
      </div>
      <div class="cfclear">&nbsp;</div>
</div>
    
    
    <div class="form_item">
      <div class="form_element cf_textarea">
        <label class="cf_label" style="width: 120px;">Comments</label>
        <textarea class="cf_inputbox" rows="3" id="text_6" title="" cols="30" name="text_6"></textarea>
      </div>
      <div class="cfclear">&nbsp;</div>
    </div>
    
<div class="form_item">
      <div class="form_element cf_button">
        <input value="Submit" name="button_7" type="submit" />
      </div>
      <div class="cfclear">&nbsp;</div>
</div>

Open in new window

LVL 9
Rowby GorenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dvz-Commented:
hey, you're right in the thinking - wrap it in it's own div....something like this may work
<div id="formBase">
 
<link href="carwash.css" rel="stylesheet" type="text/css" />
    {jumi [hours-function.php]}
    <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Your Name:</label>
        <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_0" name="text_0" type="text" />
      </div>
      <div class="cfclear"> 
        <p> </p>
    </div>
    </div>
    
    <div class="form_item">
      <div class="form_element cf_datetimepicker">
        <label class="cf_label" style="width: 150px;">Drop off date:</label>
        <input class="cf_datetime" title="" size="20" id="date_1" name="date_1" type="text" />
      </div>
      <div class="cfclear"> </div>
    </div>
    
    <div class="form_item">
      <div class="form_element cf_datetimepicker">
        <label class="cf_label" style="width: 150px;">Pick up date:</label>
        <input class="cf_datetime" title="" size="20" id="date_2" name="date_2" type="text" />
        
      </div>
      <div class="cfclear"> </div>
    </div>
    <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Drop off time:</label>
      {jumi [drop_off_time.php]} </div>
      <div class="cfclear"> </div>
    </div>
    <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Pick up time:</label>
      {jumi [pick_up_time.php]} </div>
      <div class="cfclear"> </div>
    </div>
    
    <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Email address:</label>
        <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_3" name="text_3" type="text" />
      </div>
      <div class="cfclear"> </div>
    </div>
        <div class="form_item">
      <div class="form_element cf_textbox" id="carwash_vaccum">
        <label class="cf_label" style="width: 150px;">        </label>
        <div class="carwash" id="carwashID">Come back to a shiny car. 
Let us wash and vaccum it for you on the same day as pickup!</div>
        <label class="cf_label" style="width: 150px;">Car Wash &amp; Vaccum:</label>
        <input name="carwash_vaccum" type="checkbox" id="carwash_vaccum2" value="Yes" />
      </div>
      <div class="cfclear"> </div>
</div>
    
    
    <div class="form_item">
      <div class="form_element cf_textarea">
        <label class="cf_label" style="width: 120px;">Comments</label>
        <textarea class="cf_inputbox" rows="3" id="text_6" title="" cols="30" name="text_6"></textarea>
      </div>
      <div class="cfclear"> </div>
    </div>
    
<div class="form_item">
      <div class="form_element cf_button">
        <input value="Submit" name="button_7" type="submit" />
      </div>
      <div class="cfclear"> </div>
</div>
 
</div><!--/div formBase-->

Open in new window

0
Rowby GorenAuthor Commented:
Hi dvz-,

Good I added the div formbase.

Now, just to give me a start.

I would like the div to be
200 pixels wide
10 pixels padding
1 pixel border - black

I am pretty sure how to do that on my own, but i would like to see your approach.

Rowby

0
Britt ThompsonSr. Systems EngineerCommented:
Here's the code in the div:

<div id="formBase" style="width:200px; padding:10px; border:1px solid black;">

Here's the code in a stylesheet:

#formbase { width:200px; padding:10px; border:1px solid black; }
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
Thanks, renazonse!  Working fine!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.