Question by Teonnyn: I would like to dynamically resize a parent div to fit it’s children, but how?
CSS options have all but dried up for the methods I’ve been using, so Javascript seems to be the best bet. However, the child divs change per page. What is the Javascript-based method to force a parent div to change height to fit it’s child divs dynamically based on child div height and position? I’m willing to use mootools or jQuery if needed.
Best answer:
Answer by Mike S
Try padding the bottom of the parent div in css. Beware browser comliance though.
What do you think? Answer below!
I know you don’t want a lecture on web accessibility, but I’ll just say there is virtually never a case where setting height is a good idea because of a user’s ability to modify font size (not zoom). That said, if you simply don’t declare a height attribute for the parent, it’ll “shrink” to the size of its tallest child. If the parent has to have a height (why?), then you do something like this:
d = document;
d.getElementById(‘parentDiv’).style. height = d.getElementById(‘childDiv’).style. height;
(Note that I added space before the word “height” because Yahoo was trimming the output for some reason — delete the space.)