CODEWITHSUNDEEP
jquerycssajax
captncraig
captncraig

Reputation: 23068

Resize container div after ajax request

I have a webpage where I am loading a twitter feed via ajax. My html and jquery call look like this:

<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>

It loads the result properly into the feed div, but none of the containers resize their height and it overflows poorly. All of the divs have height:auto; set on them, but that appears to do nothing. If I set a min-height on the document class, it sort of works, but I do not want to have that in there statically.

After closer inspection, it appears that the document div is resizing, but it is not pushing eveything below it down when it resizes. The page footer stays in place, and the new content is rendered behind it, and is not selectable or anything.

Is there a way to get the page to resize everything properly after the ajax call?

Edit: Heres some 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;
}

Upvotes: 2

Views: 4171

Answers (1)

Mechlar
Mechlar

Reputation: 4974

Sounds like your elements don't exactly have "layout". When going for a fluid feel you shouldn't have to explicitly set dimensions. Divs should auto adjust.

Whenever I have divs that won't take on children dimensions properly I add clear: both; and float: left:

.yourDiv {
   clear: both;
   float: left;/* or right */
}

That almost always works for me.

Otherwise, you will have to calculate the combined heights of the children and set the container to that height.

Upvotes: 2

Related Questions