div height not increasing to surround child content

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?

Answers


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.


I assume you've floated your input. To make the div size to fit it, add an overflow:auto; rule to it's style.


Need Your Help

How to go about creating a configuration file for my application in .NET

c# wpf configuration-files

I am working on a software and want to create a configuration file for my application to store configurations that will be used at runtime. I have seen some software use a config.xml file to achieve

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.