Menu
I wrote this html and 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 your 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 to fit an input into a div but I'm failing and don't know why (CSS code is on JSFiddFiddle). I reached these two options
http://jsfiddle.net/rmkc55zc/
http://jsfiddle.net/rmkc55zc/3/
In option 1 input width is 100% but then input is longer than div.
In option 2 I added overflow: hidden but then input is cut and I don't like that.
Does anybody knows something else I can try to fix it?
Thanks
348
Add box-sizing: border-box; property to your input styles. The result.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
