How to stop a parent div expanding vertically when child div becomes visible

Question

I have a parent div that has a height set on it.

There are child divs inside of it with initial visibility turned off.

When I make it visible, the parent div expands vertically. I dont want that.

Background:

I'm using DataTables, with the scroller and filterColumn plugins. The header of my table has an action on it assigned by jQuery that when I click on the a column header, a div is to appear below it and show some content. Issue is, when it appears, the header div expands.

I've tried overflow: hidden, auto, etc, but the closest i can get is the scrolling body seems to cover the floating div. I also set the z-index to above the scroller, but that doesnt do anything either.

Any suggestions?

div { max-height: 200px !important; } – Brant Jul 12 '13 at 19:59 — Brant, Jul 12 '13 at 19:59
overflow:hidden works with floats I think – Spirals Whirls Jul 12 '13 at 19:59 — Spirals Whirls, Jul 12 '13 at 19:59
can you show it in a fiddle – Spirals Whirls Jul 12 '13 at 20:03 — Spirals Whirls, Jul 12 '13 at 20:03

score 2 · Answer 1 · answered Jul 12 '13 at 19:59

2

You can give the parent div a fixed height

.parent {
    height: 400px; 
 }

and make your child div have absolute position

.child {
    position: absolute;
}

answered Jul 12 '13 at 19:59

rgoraya

241
1
3
12

score 0 · Answer 2 · answered Jul 12 '13 at 19:59

0

use position:absolute on the element being shown to remove it from the page's flow. this will prevent it from affecting the width of the parent div.

answered Jul 12 '13 at 19:59

Travis J

81,153
41
202
273

How to stop a parent div expanding vertically when child div becomes visible

2 Answers2