CODEWITHSUNDEEP
htmlcssheight
user3346696
user3346696

Reputation: 169

css auto height div

I'm building a step-by-step booking form but I'm in trouble with the height of a container. You can see the issue here; by step 2 (just click on the 'next' button under the first screen)

http://staging.karlienfabre.be/pocoloco/book.html

So, the css of the content div 

.wizard>.content {
background: #f3f3f3;
display: block;
margin: .5em;
min-height: 35em;
overflow: hidden;
position: relative;
width: auto;
font-family: 'Raleway', sans-serif;}

I can change the overflow to auto but than it's just a scrolling div. I would like that the height of the content change by the amount of 'content' in the div. So the whole form should fit in the content div with grey background.

I can't find the issue...

Thanks in advance!

K.

Upvotes: 0

Views: 113

Answers (2)

Jegannath
Jegannath

Reputation: 29

I think so the problem is in the "overflow" portion. Just try out overflow : scroll/auto

Upvotes: 0

Matt
Matt

Reputation: 2821

I think the problem is that your section tags within the .content div are positioned absolutely. This means the parent container has no idea how big they are. Remove the absolute positioning on .wizard>.content>.body and it should work.

Upvotes: 2

Related Questions