Tutorial :What's keeping my input element from displaying like a block element?



Question:

http://jsfiddle.net/aam7J/

How would I induce div-like behaviour on the input element? Specifically, how can I induce the width to expand such that its outer width including margin fills up the container? width: 100% doesn't work, because it doesn't take into account the other box model attributes.


Solution:1

I use a "hack" to account for the input border width something like this...

<div>hello world</div>  ​  <div class="adjustForTheInputBorder">      <input type="text" />  </div>      input   {      width:100%;       border-width:2px;   }    div.adjustForTheInputBorder  {       margin-right: 4px;  /* or 2x whatever your input border width is */  }    div   {      background-color: pink;  }  

My adjustForTheInputBorder class tends to have a name which more appropriately conveys my hatred of css though... :)

P.S. div renders as display:block by default, you don't need that there.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »