.load container's height is ignored by content management

Question

I'm loading content into a div with the jquery .load. What happens is some how the rest of the page ignores the content's height. I'm loading it like so

jQuery(document).ready(function ($) {
$('#loader_container').load('brigham_overview.aspx');
});

This is the page http://www.brighamandwomens.org/Patients_Visitors/pcs/rehabilitationservices/mock/overview.aspx

You can see how it overflows the bottom and the e-mail link it way way at the top over the Take a Look tile and it should be at the very bottom.

I'm wondering if there's maybe a way to have the .load happen and then somehow after it's loaded do something with the script to assign the "loader_container" the height of the wrapper div in the loaded content?

That or is there a way to somehow have the script run before the rest of the body is loaded?

Answer 1

This looks to be an issue with your CSS rather than your .load() function. I notice that all of your containers inside of #totalContainer are positioned absolute. Which is why it is not calculating the height properly.

Some other suggestions would be to set your images as background images if possible. It looks like you are just positioning everything absolutely and laying them on top of each other. This doesn't seem ideal or semantic...

Take this part for example...

<div id="news_backing" class="blue" style="width: 314px; height: 165px; position: absolute; z-index: 2; background-color: rgb(239, 245, 248); background-position: initial initial; background-repeat: initial initial; ">
</div>
<img id="news_icon" src="http://www.klossal.com/brigham/what_we're_upto_icon.png" style="width: 118px; height: 46px; top: 55px; left: 30px; position: absolute; z-index: 3; ">
<p id="news_header_txt" class="news_txt" style="width: 110px; top: 55px; left: 180px; position: absolute; z-index: 3; font-size: 20px; color: rgb(14, 134, 161); font-family: Arial, light, sans-serif; "> 
What We're Up To
</p>

You could set the image as a background image, and the <p></p> tag should be inside of the div. Not absolutely positioned over the top of it.

I really don't know how much help this is going to be but in my opinion it is not your .load() request causing the problem. It is your CSS and HTML structure.

...

One last friendly suggestion would be to not use inline styles if it can be avoided. This will make things much easier in the long run.