Edit Ok, after doing some research it seems to be the clearfix I am using.
The second level wrapper (second wrapper > first wrapper > resize div ). actually contains two floated divs, next to each other.
if below the two floated divs I have ` it all works perfectly.
Whats going on?
I have a div that can be hidden of shown via jQuery.
this works perfect in any other browser.
the containers around it are grown or shrunk correctly.
Internet explorer however has decided not to play nice.
what happens is,
the div containing the jQueried div is grown or shunk correctly however the div containing that one containing the one that contains that one stays the same height.
Now the annoying this is, I do not believe this to be a css issue, because as soon as I do something that causes the window to repaint (resize/bring up developer tools etc) this issue fixes itself.
why is this and how can I fix it?
background: -webkit-gradient(linear, 0% 0, 0% 100%, from(white), to(#D9D9D9));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0, startColorstr = 'white', endColorstr = '#D9D9D9');
background: -moz-linear-gradient(270deg, white, #D9D9D9);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 10px;
-moz-border-radius: 0 0 10px 0;
padding: 10px;
float: left;
width: 710px;
Wrappers wrapper div css
background-color: #D4D3D1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius: 0 0 10px 10px;
border: 1px solid #8B8B8B;
.clearfix {
display: inline-block;
}
.clearfix::after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
Wrappers wrapper wrapper div css
background-color: white;
padding: 10px;
I had a similar issue one time. It seemed like the parent div was "unaware" of the child div shrinking and growing. If I were you, I'd bind a function to the child div's resize event (http://api.jquery.com/resize/) and dynamically alter the css properties of the the parent div on the fly.