Unable to pinpoint the source of the excess spacing within a form field

There appears to be some extra space in the text field of my form, extending beyond the container margin. Please refer to the image and JSFiddle http://jsfiddle.net/GRFX4/. Any thoughts on what might be causing this issue? Thank you.

HTML:

<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Contact Us</h1>
<div id="addressbox">
<h3>MSD Center</h3>
      <p>546, Avenue Ffds Dfdsfd</p>
      <p>A-1234 Fdfdfsf (Austria)</p>

        <ul id="contact">
          <li><i class="icon-phone-sign"></i>+352 691 123.456</li>
          <li><i class="icon-envelope"></i><a href="#"> [email protected]</a></li>
          <li><i class="icon-map-marker"></i><a href="http://goo.gl/m2">directions</a></li>
        </ul>

</div>  <!-- End DIV addressbox -->

</div>  <!-- End DIV block-left -->
<div class="block-right">  <h1>Contact Form</h1>
            <!-- CONTACT FORM-->
            <div class="contact-form">




                  <form id="contactfrm" method="post" class="clearfix">
                        <div class="clearfix">
                            <input id="name" name="name" placeholder="Name" type="text" value="">
                            <input id="email" name="email" placeholder="Email" type="email" value="">
                        </div>

                        <textarea id="message" name="message" placeholder="Message and contact details"></textarea>

                        <input type="submit" value="Send" name="submit">

      <p class="success" style="display:none">Thank you for your message!<br>We will respond promptly.</p>
      <p class="error" style="clear:both;display:none;color:red; text-align:center">Error: Invalid email and/or empty message.</p>
                    </form>
                </div><!-- /.contact-form -->
    </div>  <!-- End DIV block-right -->
     </div>  <!-- End DIV Block -->
    </div>  <!-- End DIV Contactwrapper -->

CSS:

#contactwrapper {
    margin-top: 30px;
    padding-bottom: 30px;
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
    -moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
    box-shadow: 0px 0px 10px 2px #e0e0e0;
}
.block-left {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding-right: 20px;
}
.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;
}

.clear:after { clear: both }
.clear { clear: both }

#addressbox p {
    color: #333;
    font-weight: 400;
    font-size: 13px;
    line-height: 12px;
}
#contact li {
    display: inline;
    padding-right: 5px;
    color: #333;
    list-style: none;
    font-weight: 500;
    font-size: 13px;
}
#contact li a {
    border-bottom: none;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}
.coach1 li {
    margin: 0px;
    margin-bottom: 3px;
    margin-left: 10px;
    padding: 0px;
    color: #667878;
    list-style-type: none;
    font-weight: 300;
    font-size: 14px;
}

.contact-form input[type=text] {
    float: left;
    width: 200px;
}
.contact-form input[type=email] {
    float: right;
    width: 200px;

}
.contact-form input[type=submit] {
    float: right;
}
.contact-form textarea {
float: left;
    height: 70px;
    margin-bottom: 10px;
    margin-top: 20px;
    width: 100%;
}
/*************************************************************


/*************************************************************
 * FORMS
 *************************************************************/
form label { cursor: pointer }
form textarea,
form input[type=text],
form input[type=password],
form input[type=email] {
    background: #d5d5d5 url('../images/form-bg.png') left top repeat-x;
    border-top: 1px solid transparent;
    border-right: 1px solid #d2d2d2;
    border-bottom: 1px solid transparent;
    border-left: 1px solid #d2d2d2;
    color: #7c7c7c;
    font-family: 'Arial', sans-serif;
    padding: 6px 8px;
    resize: none;
}
form input:focus,
form textarea:focus {
    background: #d5d5d5 none;
    border: 1px solid red;
    outline: none;
}
form input[type=submit] {
    background: #0064C4 url('../images/form-caret.png') right center no-repeat;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 8px 50px;
    text-transform: uppercase;
}

Answer №1

It was noted that the block-right div's width was set to 50%. However, the width of the textarea is overflowing its parent container. To address this issue, consider using the following CSS:

.block-right {
    float: right;
    box-sizing: border-box;
    width: 50%;
    overflow:hidden;
}

VIEW DEMO FIDDLE

Answer №2

To troubleshoot issues like this in Firefox, you can utilize the DOM inspector tool. Similar tools are available in other browsers as well.

Within the CSS rules, you will find:

.contact-form textarea {
    float: left;
    ...
    width: 100%;
}

and

form textarea {
    ...
    padding: 6px 8px;
}

The containing block (form) has a width of 50% of 980px, which equates to 490px. The content width of the textarea is also set to 490px (100%) wide. However, due to an additional padding of 8px on both sides, overflow is occurring.

To address this, you can either adjust the content width to compensate for the padding:

.contact-form textarea {
    float: left;
    ...
    width: 474px;
}

http://jsfiddle.net/GRFX4/3/

or eliminate the padding altogether:

.contact-form textarea {
    float: left;
    ...
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

http://jsfiddle.net/GRFX4/4/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to delete the header box in IPBoard?

Recently, one of our team members working on the website decided to go rogue and sneak in a large box featuring a Dremel ad. Unfortunately, I am clueless when it comes to removing it. The website is self-hosted with full admin access. ...

Chosen option from the Bootstrap drop-down menu

Struggling with two problematic input fields on my Bootstrap website... The first is a Bootstrap Typeahead input field: <input type="text" id="typeahead" name='name' placeholder='The name' class="form-control" data-provide="typeahe ...

Interactive ajax and php dropdown menu

Hey there, I'm running into a small snag with my dynamic select feature, as mentioned in the title. I am aiming to achieve the following outcome: When a user selects an instrument from the first dropdown menu, the second dropdown menu labeled "Besetzu ...

How can I dynamically generate multiple Reactive Forms from an array of names using ngFor in Angular?

I am in the process of developing an ID lookup form using Angular. My goal is to generate multiple formGroups within the same HTML file based on an array of values I have, all while keeping my code DRY (Don't Repeat Yourself). Each formGroup will be l ...

Linking Two HTML Components in Angular 4 with Identical Values

Recently, I've started working with Angular and encountered an issue. In a table row, the value item.md_id is bound like this: <tr *ngFor="let item of driverData"> <td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId ...

Creating interactive buttons with CSS and jQuery

As a newcomer to coding, I'm trying my hand at creating two buttons that transition from green to blue with a single click, and eventually incorporating them into a live website. The functionality I'm aiming for includes: Both buttons startin ...

Arranging null values and numbers to imitate the behavior of the tabindex HTML attribute

Currently, I am facing a rather unusual issue with JavaScript sorting. As I delved into the complex world of sorting, I found myself in need of some guidance: My goal is to replicate the functionality of the tabindex HTML attribute, which alters the order ...

Fixed css footer with full height content container

For my website's sticky footer, I followed this technique: I wanted to add a border around the entire site that also encompasses the footer, but ran into an issue where it did not extend around the page properly. Here is what happened: You'll n ...

retrieve the parent frame's request URL

I am faced with the task of writing a JSP code that retrieves the getRequestURL() of the parent frame (the URL shown in the address bar) from a child frame. However, when I attempt to do this, I only obtain the URL of the child frame. Is there anyone who ...

Creating manageable CSS styles for a wide variety of themes

I need to add themes to a web application that allows users to switch between them seamlessly. The designers want a variety of font colors and background colors, around 20 in total. Is there a way to achieve this without creating multiple .css files, which ...

Transform ajax functionality into jquery

I need help converting an AJAX function to a jQuery function, but I'm not sure how to do it. function convertToJquery() { // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Set up variables needed to send to PHP file var ur ...

Troubleshooting Div Element Width in CSS Not Functioning

When working on a form design, I encountered an issue where the text labels were not aligning to the same width. Despite setting the width, it didn't seem to work as expected: .form-label { display:inline; width: 160px; } <div class="form-label ...

troubles arise when using undeclared functions in javascript

Recently, I've been working on implementing a Javascript CountDown Timer triggered by a button click. The Javascript code is stored in an external file, as well as the CSS for styling the timer. The problem arose when I tried including the Javascript ...

What is the best way to achieve full width for text on large screens in Bootstrap 3 while eliminating right margins?

I've been attempting to create a full-width text display on large screens using Bootstrap, but despite utilizing container-fluid and trying solutions from StackOverflow that should enable full width, there still remains whitespace at the right side of ...

Modifying the header on an HTML page

Looking for assistance with code to have my site header appear after the page has scrolled past Figure 1 and change on reaching Figure 2. Any suggestions on how I should write this code? Your help is greatly appreciated! ...

Ways to determine if an object has a provided attribute?

As I work on creating a small website using django, I encountered an issue: In my site, I want to view posts in detail, but not every post includes an image attribute - leading to errors when trying to display images that do not exist. The solution lies ...

The combination of two colors in a hard background fails to create an appealing aesthetic

Seeking assistance with an issue I encountered while trying to create a two-color background. Below is the code snippet: body, html { height: 100%; width: 100%; background: #0000ff; background: linear-gradient(180deg, #ff0000 50%, #0000f ...

Animate hovering over a specific element within a group of similar elements using jQuery

Hi there! I recently started exploring Js and jQuery, and I was able to create a cool width change animation on a div when hovering over another. However, I ran into an issue when trying to implement this with multiple sets of similar divs. Whenever I hove ...

Get rid of emojis and unicode characters

My website and database are both configured to utf-8 and utf8mb4 encoding. While textareas accept utf-8 symbols and emojis without issue, I want to restrict certain input fields (such as name and address) to only allow basic text and numbers. This include ...

Responses were buried beneath the inquiries on the frequently asked questions page

My FAQs page is in pure HTML format. The questions are styled with the css class .pageSubtitle, and the answers have two classes: .p1 and .p2. Here's an example: <p class="pageSubtitle">Which Award should I apply for?</p> <p class="p1" ...