html - Why my input doesn't fit into the div? -


i wrote html , css codes:

html

  <body>     <div id="container">       <div id="containerheader">         <h1>seek & enjoy</h1>         <h3>your movie seeker</h3>         <div id="containerform">           <form class="form-wrapper cf">             <div id="inputplusbuttons">               <input type="text" placeholder="find movie" required>               <div id="containerbuttons">                 <button id="seek" type="submit">seek</button>                 <button id="reset" type="submit">reset</button>               </div>             </div>           </form>         </div>       </div>       <div id="results">         <p>         </p>         <div id="movielist">         </div>         <div id="moviedetails">         </div>       </div>     </div>   </body> 

i'm trying fit input div i'm failing , don't know why (css code on jsfiddfiddle). reached these 2 options

  1. http://jsfiddle.net/rmkc55zc/

  2. http://jsfiddle.net/rmkc55zc/3/

in option 1 input width 100% input longer div. in option 2 added overflow: hidden input cut , don't that.

does knows else can try fix it?

thanks

add box-sizing: border-box; property input styles. result.


Comments

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -