Border-right not showing

Question

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/

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','')">[email protected]</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 -->  

Answer 1

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