831 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
tigerlabs says

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

Layout

Thanks in advance! :)

831 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
tigerlabs says

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

119 posts
  • Ireland
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 4-5 years
  • Bought between 50 and 99 items
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
OllieMcCarthy says

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

2001 posts
  • Elite Author
  • Author had a Free File of the Month
  • Has been a member for 4-5 years
  • Austria
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Microlancer Beta Tester
+3 more
revaxarts says

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

140 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • United States
weblusive says

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/

415 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 4-5 years
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Referred between 10 and 49 users
  • Portugal
unisphere says
469 posts
  • Author had a File in an Envato Bundle
  • Sold between 250 000 and 1 000 000 dollars
  • Elite Author
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 4-5 years
  • India
+1 more
SaurabhSharma says

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.

831 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
tigerlabs says

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. :)

by
by
by
by
by
by