Help accomplishes dynamic effect

Does anyone know how I would a accomplish this layout? It can use a combination of jQuery and CSS .

Thanks in advance!

*The title should be “Help accomplishing dynamic effect” whoops.

Just grab the heights. Something like this should work

On a sidenote – how do I put line breaks into the code tag here!?

OllieMcCarthy said
Just grab the heights. Something like this should work var headerHeight = $('.header').outerHeight(), leftHeight = $('.left').outerHeight(), totalHeight = headerHeight + leftHeight; $('.sidebar').css('height', totalHeight+'px'); On a sidenote – how do I put line breaks into the code tag here!?

use pre instead of code

There is a specialized jquery plugin to accomplish this, called “equal heights”. Here is a link to the tutorial – http://www.cssnewbie.com/equalheights-jquery-plugin/

This might help: http://www.alistapart.com/articles/fauxcolumns/

unisphere said
This might help: http://www.alistapart.com/articles/fauxcolumns/

+1. Fauxcolumns is the best choice. The only drawback is that the background color will be through an image. You can not provide CSS BG color options.

OllieMcCarthy said
Just grab the heights. Something like this should work

var headerHeight = $('.header').outerHeight(),
leftHeight = $('.left').outerHeight(),
totalHeight = headerHeight + leftHeight;

$('.sidebar').css('height', totalHeight+'px');

On a sidenote – how do I put line breaks into the code tag here!?

Thanks Ollie, I think I will try doing it this way.

Will let you know if it works out.