Div height not increasing child content

Question

I created an input field in a div

The height of the div is automatic, but unfortunately the height of the searchbar_home div does not increase to surround my input box and submit button.

Here is 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 a demo on jsfiddle.

How can I increase the size of the `searchbar_home`` div?

Answer 1

Have you tried to use: after the trick to clean your floats?

From your code:

  #searchbar_home:after{ clear: both; } 

You need to actually give it some content and make it blocky rather than inline -

  #searchbar_home:after{ content:''; display:block; clear: both; } 

Must work.

Answer 2

I assume you posted your input . To make the div fit, add overflow:auto; .