I created an input field in a div
The div
height is auto but unfortunately the searchbar_home
div
height is not increasing to surround my input box and submit button.
Here's my HTML
<div id='container'>
<div id="content">
<h1 class="home_title">English to Malayalam</h1>
<div id="searchbar_home">
<input type="text" />
<input type="submit" />
</div>
</div>
<footer>
<p>Copy right only for me ;)</p>
</footer>
</div>
My CSS:
#searchbar_home{
margin: 0 auto 20px;
padding: 10px;
height: auto;
width: 80%;
background: #F5F5F5;
border: 1px solid #D8D8D8;
border-radius: 6px;
}
#searchbar_home:after{
clear: both;
}
#searchbar_home input[type="text"]{
height: 35px;
float: left;
width: 90%;
border: 1px solid #CCCCCC;
border-right: none;
border-radius: 6px 0 0 6px;
}
#searchbar_home input[type="submit"]{
float: left;
background: #414141;
height: 40px;
width: 50px;
}
Here is the demo on jsfiddle.
How do I get the `searchbar_home``div' to increase in size?
I assume you've floated your input
. To make the div
size to fit it, add an overflow:auto;
rule to it's style.
Ah you've tried to use the :after trick for clearing your floats?
From your code:
#searchbar_home:after{
clear: both;
}
You'll need to actually give it some content and make it a block item rather than inline -
#searchbar_home:after{
content:'';
display:block;
clear: both;
}
Should work.
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