Inkább én bocs, így utólag visszaolvasva kicsit túlzás, amit írtam, pedig eredetileg nem szántam ilyen oltósnak, csak kissé fáradt vagyok.
(3 óra alvás, kissé nehéz nap, ilyesmik. Sorry.
)
OK, látom már a problémát, lejjebb görgettem.
(Eddig csak megnéztem gyorsan a kezdőlapot, aztán lefostam.) Igazából ott kezdődik a probléma szerintem, hogy mindezt JavaScripttel akarod megoldani, ahogy martonx már utalt erre.
Sok megoldás van divek egyenlő magasságának megoldására:
http://www.hongkiat.com/blog/css-equal-height/ (nézd a demóját)
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://css-tricks.com/fluid-width-equal-height-columns/ (+demo)
http://codepen.io/micahgodbolt/pen/FgqLc
A jelenlegi megoldásban ez az a kód, ami nálad csinálja a dolgot, erre voltam korábban kíváncsi, de lusta voltam megnézni a forráskódot:
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".mid"));
});
Ha a .mid class-ra raksz egy overflow: auto; tulajdonságot, akkor működni fog a jelenlegi is. De akkor ott van a görgetősáv, feltételezem, azt nem akartad korábban, azért vetetted be többek közt ezt a kódot.
Hogy most itt a .height() miért ad vissza rossz magasságot, mármint konkrétan 580px-est a 694px körüli helyett, azt most nincs agyam felfogni. 
Amúgy a fölső menünél rohadt idegesítő, hogy bizonyos esetekben nem lehet eltalálni a menüpontot, pl. a Rólunk felirat föléviszem, és picit is máshova viszem a kurzort, mint az alsó sáv, akkor már rossz, "kiugrott" belőle. Erről a jelenségről az ennek a hsz.-nek a végén belinkelt cikkben olvashatsz: [link].
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
Szerk.:
időközben megelőztek, ugyanazzal a linkkel, amit fentebb én is bedobtam, most láttam, hogy végül nem is küldtem el a hsz.-t, amikor megírtam, csak itthagytam a háttérben az egyik fülön, kész vagyok ma... 