Can't identify what is causing extra space in a form field

Question

As you can see on the picture below and on JSFiddle http://jsfiddle.net/GRFX4/ I have some extra space in my text field of my form. It looks like for some reason it goes beyond the margin of the container. Any idea what the issue is? Many thanks

enter image description here

HTML:

<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Nous contacter</h1>
<div id="addressbox">
<h3>Centre de msd</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="#"> geyi@iyiyiy.com</a></li>
          <li><i class="icon-map-marker"></i><a href="http://goo.gl/m2"> itinéraire</a></li>
        </ul>

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

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




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

                        <textarea id="message" name="message" placeholder="Message et coordonnées"></textarea>

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

      <p class="success" style="display:none">Merci pour votre message!<br> Nous vous répondrons très rapidement.</p>
      <p class="error" style="clear:both;display:none;color:red; text-align:center">Erreur: E-mail non valide et/ou message vide.</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;
}

Good old "textarea with 100% width" problem. :) This question might help: http://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present — Steve, Sep 28 '13 at 18:22
The reason for this is that the property `width` will not take into account any padding or borders added to the element unless you change the `box-sizing` css property to `border-box` — , Sep 28 '13 at 18:31

score 2 · Accepted Answer · answered Sep 28 '13 at 18:21

2

You declared block-right div width as 50%. But textarea width is overflowing parent one. Try:

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

DEMO FIDDLE

answered Sep 28 '13 at 18:21

Kiran

20,167
11
67
99

Thanks. It worked, but do you know why textarea width is overflowing parent one? It shouldn't with a width of 100%, no? Tks – Greg Sep 28 '13 at 18:24
It is because you haven't declared any width to the direct parent of textarea. But top most parents width is more than textarea direct parent. – Kiran Sep 28 '13 at 18:26

Olaf Dietsche · Answer 2 · 2013-09-28T21:12:54.220

With Firefox, you can investigate such issues with the DOM inspector. Other Browsers have similar tools.

In the rules, you will see

.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 is 490px. The content width of the textarea is also 490px (100%) wide. But additionally, the textarea has a padding of 8px to the left and the right side, which is causing the overflow.

So, you must either reduce the content width to 490px - padding

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

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

or remove the padding

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

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

Can't identify what is causing extra space in a form field

2 Answers2