table-footer-group breaks out of parent

Tuesday, July 8, 2014

I am working with a sharepoint site. therefor i cannot change the structure of the html of the web part i am customizing.


This webpart have an image at the top and some text at the bottom. I have changed the order of these by doing like so:



.THE-TEXT-DIV{
max-width:100%;
table-layout: fixed;
display:table-header-group;
}
.THE-IMAGE-DIV{
max-width:100%;
table-layout: fixed;
display:table-footer-group;
float: none !important;
}


The parent is properly sized, but the image and the text breakes out of the parent div. This does not happen if display is set to block, but to get the elements in the right order I have to do it like the code above shows. I tried fixing the break out by settingtable-layout: fixed;That didn't work..


None of the divs have any floats.


I cannot use jQuery .insertAfter() for this purpose


So why are they breaking out if its parent? Is it possible to fix this?


This problem does not occur in chrome..







http://ift.tt/1k1IvqN