Solved

Putting a DIV to create an overall width in a form

Posted on 2009-07-11
4
227 Views
Last Modified: 2012-05-07
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

0
Comment
Question by:Rowby Goren
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 5

Expert Comment

by:dvz-
ID: 24832079
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 24832336
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
 
LVL 30

Accepted Solution

by:
Britt Thompson earned 500 total points
ID: 24832642
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
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 31602472
Thanks, renazonse!  Working fine!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question