26

would you know why the blue border does not show on the right side of my field? (field has a width of 100%) Many thanks http://jsfiddle.net/KtEdG/

enter image description here CSS:

.wrapper {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
    overflow: hidden;

}


.block {    
    padding: 20px;
    background-clip: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overflow-x: hidden;


}

.block-left {
    float: left;
    box-sizing: border-box;
        overflow: hidden;

    width: 50%;

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


}

/*************************************************************
 * CONTACT
 *************************************************************/
.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;
    margin-top: 8px;
}
.contact-form textarea {
    float: left;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 100%;
    height: 70px;
    overflow: auto;
}
/*************************************************************


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



#addressbox {
    position: relative;
    padding: 10px 0px 0 10px;
    margin-bottom: 20px;
}
#addressbox p {

    line-height: 14px;
}
#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;
}

HTML

<div class="wrapper white-background">
            <div class="block">
          <div class="block-left">
            <div id="addressbox">
              <p><strong>fdsfsd</strong></p>
              <p>3, rudsfdser</p>
              <p> L53ddfsfurg)</p>
              <ul id="contact" class="ul-none">
                <li><i class="fa fa-phone blue"></i> +352 691 123.456</li>
                <li><i class="fa fa-envelope blue"></i> <a href="javascript:sendAnnotatedMailTo('contact','bfdfs','dfsf','Contact via blondiau.lu','')">contact@fdsfdssd.lu</a></li>
                <li><i class="fa fa-map-marker blue"></i><a href="http://goo.gl/I47" target="_blank"> Plan d'accès</a></li>
              </ul>

            <div class="contactarrow"><img src="images/contact-handwriting.png" alt="contact-handwriting" width="339" height="69"></div></div>
            <!-- End DIV addressbox --> 
                      </div>
          <!-- End DIV block-left -->

          <div class="block-right"> 
            <!-- 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="Votre message et vos coordonnées"></textarea>
                <input type="submit" value="Envoyer" name="submit">
                <p class="success" style="display:none">Votre message a bien été envoyé! Merci</p>
                <p class="error" style="display:none;">E-mail non valide et/ou message vide</p>
              </form>
            </div>
            <!-- /.contact-form -->
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Greg
  • 3,025
  • 13
  • 58
  • 106
  • 2
    Could you please remove unrelated CSS rules and HTML? It's a bit hard to comb through all that code. – JJJ Dec 28 '13 at 11:19

2 Answers2

19

Because your textarea is overflowing .block-right and since you are using overflow: hidden; you cannot see the right part of your textarea, you may assign some fixed width like

.contact-form textarea {
    float: left;
    margin-top: 20px;
    margin-bottom: 10px;
    width: 462px;
    height: 70px;
    overflow: auto;
}

Demo

Or if you want to stick to width: 100% than you will have to get rid of overflow: hidden; from .block-right

Demo 2

Also, you have a lot of CSS, which might not be useful, so code is very much messy in general.

Also, just noticed, you are using box-sizing property but you are not using the prefixed properties, so it will fail in many browsers, so use them

.block {    
    padding: 20px;
    background-clip: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* Other Properties */
}

Demo

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • Thanks a lot. I like demo 2. But do you know why now the right side of the e-mail field is not right-aligned with the message field? (it seems that the message field goes a few pixels more to the right even though both have float-right)? Thanks a lot – Greg Dec 28 '13 at 11:30
  • @Greg Don't take it in a wrong way but your CSS is way messed up, learn CSS Positioning, I've explained [here](http://stackoverflow.com/questions/17362315/css-positioning-not-working-as-expected) and learn how floats work, which I've explained [here](http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504) and you will get clean CSS, your code is way dirty :) – Mr. Alien Dec 28 '13 at 11:32
  • @Greg Oops, provided wrong link for positioning, here you go - http://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on-each-other-instead-of/20718728#20718728 – Mr. Alien Dec 28 '13 at 12:24
8

The textarea is overflowing as Mr. Alien is saying since width:100% + border is more then 100% (duh). To include border and padding "inside" your width you can use box-sizing:border-box.

Just add box-sizing:border-box to .contact-form textarea and you'll be fine. More info available on http://css-tricks.com/box-sizing/.

Marwelln
  • 28,492
  • 21
  • 93
  • 117