Css: min-height interpreted as height (iPhone webapp)

Question

I building an iPhone webb app based on iWebKit's framework. I'm currently integrating a CSS div slider to improve the navigation between pages (divs) and everything works fine except one thing.

It appears as if I'm supposed to set a fixed height value to the div containing the sliding objects. These objects will contain quite a lot of content and wary in size, hence the divs/page have to expand vertically by default. For some reason, it appears as if the browser interprets min-height as height and doesn't expand the div to display all content. I realize there's probably a small mistake somewhere, something I have forgotten to add or remove. Please help me by pointing these out for me. Thanks

Wrapper containing the slides:

#contentWrapper {
float: left;
min-height:305px;
position: relative;
margin:0px;
padding-bottom:0px;
display:block !important;
}

Class added on every sliding obj

.additional-block {
height:auto;
position: absolute;
padding-bottom:30px;
display:block !important;
}

Live demo: http://utvecklingspunkten.se/heightIssue.php Click on "Click" to see the actual issue appearing; the text is cut off below 305 px. The issue appears in all browsers including Safari for iPhone.

Answer 1

It's the overflow: hidden on your "content2" div that's conflicting here. Setting that means that the container can overflow, so it does. (Removing the min-height will show you that it would be 0 pixels high otherwise.)

Removing the overflow setting will have the effect I think you want.