Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Putting a DIV to create an overall width in a form

Posted on 2009-07-11
4
Medium Priority
?
235 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 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

610 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