CODEWITHSUNDEEP
javascriptjquerycss
Gaurav
Gaurav

Reputation: 8487

Div is not calculating height automatically

I have a div which contains 2 elements. First element is a span and second element is an input, like:

<div id="container">
   <span>FirstName</span>
   <br />
   <input type="text" />
</div>

The width of container div is set to 300px and I was expecting that it will automatically calculate its height according to its children's height. Here it calculates its height, but it didn't include the input element height.

What's going on here?

EDIT

My container position : absolute and because of some reason i can't set overflow : hidden

Upvotes: 0

Views: 285

Answers (3)

Aditya
Aditya

Reputation: 4463

Use height:inherit; in the child elements.

Upvotes: 0

Vivek Chandra
Vivek Chandra

Reputation: 4358

Try the following - 

#container{
width:300px;
height:auto;
overflow:hidden;
}​

Working DEMO

EDIT: added Position:absoulte

Updated DEMO

Upvotes: -1

Dipak
Dipak

Reputation: 12190

Here is working demo with jQuery - http://jsfiddle.net/dccF2/3/

Upvotes: 2

Related Questions