CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Claudio
Claudio

Reputation: 894

CSS - Auto-height div

I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...

How could I make my main div expand with my content.

CSS

#main
{
    position: relative;
    overflow: hidden;
}

I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?

See live demo here! (The (i) button) The divs expand when you click on them.

A few times it worked on another computer, but very randomly..

Tell me if you need the scripts or more code. Basically, everything's wrapped in .main -> .panel

Simple: When the div is expanded, expand the main div's height to fit it.

.panel
{
    position: relative;
    display: table-cell;
    width:100px; 
    vertical-align:middle; 
}

Upvotes: 2

Views: 188

Answers (2)

user3113607
user3113607

Reputation: 82

The problem is not with the main div, but the class panel.

.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}

This is also a problem.

#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}

My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.

Let me know if this helps in some way, and if you need help debugging anything from there.

EDIT

Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.

I can't locate where this script goes off, so if you can provide it, I could figure it out.

Upvotes: 1

Mike H.
Mike H.

Reputation: 1751

If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.

Upvotes: 0

Related Questions