I am currently facing an issue with a webpage where I am using ajax to load a Twitter feed. Below is my HTML and jQuery setup:
<body>
<div class="document-wrapper">
<div class="document">
<div class="content">
<div class="right-column">
<h2 class="twitter-header">Recent Tweets</h2>
<div class="twitter-feed" id="feed">
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#feed').load("/Home/Twitter", '', showNewContent)
});
function showNewContent() {
}
</script>
</div>(document)
<div class="document-end"></div>
The content is loading correctly into the feed div, but there is an issue with container resizing causing poor overflow. Although all divs have height:auto; set, it doesn't seem to work. Setting a min-height on the document class resolves the issue slightly, but this is not the desired solution.
Upon closer inspection, it seems that the document div is resizing but fails to push everything below it down when it does so. As a result, the page footer remains in place while new content gets rendered behind it and becomes unselectable.
Is there a way to ensure proper resizing of all elements after the ajax call?
Edit: Here's some relevant CSS:
.footer-wrapper,
.document-wrapper {
width : 960px;
margin : 0 auto;
position : relative;
height : auto;
}
.document-wrapper { background : url(background-content.jpg) top repeat-y; }
.document {
padding : 0 35px 75px 35px;
height: auto;
}
.document-end {
height : 39px;
width : 960px;
margin : 0;
background : url(background-content-end.jpg) top no-repeat;
}
.right-column {
float : right;
width : 300px;
font-size : 90%;
position : relative;
left : -30px;
padding : 4px 0 0 0;
height: auto;
}
.twitter-feed
{
height:auto;
color : #ccc;
}