Witam.
Od kilku lat prowadzę stronę Gminnego Ośrodka Kultury w Książkach - www.gokksiazki.pl . Od jej założenia znacznie zmieniły się standardy jeśli chodzi o wygląd stron, szerokość całkowitą i rozmieszczenie elementów. W związku z tym chciałbym poszerzyć stronę tak, aby zmieścić conajmniej dwa divy z treścią obok siebie - rozrysowałem to na rysunku poglądowym, który można zobaczyć o tutaj - https://1drv.ms/u/s!AixAPVWhFh4fkhdbgwjAlarpIsLq . Pojawił się jednak problem - kompletnie nie wiem jak to zakodować w CSS bo elementy DIV nie dość, że mają różne długości to jeszcze części z nich można rozwijać przez skrypt w JS. Pomożecie mi to jakoś inteligentnie i bezstresowo rozwiązać? 
Zmieniły się też normy dotyczące projektowania interfejsów stron - zobacz nawet dobreprogramy.
Obecnie chyba, żadna strona nie korzysta z układu [pasek boczny], [treść], [pasek boczny], bo ani to wygodne, ani ładne.
Na Twoim miejscu zacząłbym od przemyślenia jak to ma wyglądać na telefonach, następnie na tabletach i na samym końcu jak na komputerach - przebudowywać stronę i nie dostosować jej do wersji mobilnych to już sadyzm.
Nie jestem pewien czy dobrze zrozumiałem “rysunek”, ale prawdopodobnie wystarczy Ci dowolny grid.
Według mnie Twój nowy wzór z divami, nie jest dobry. Teraz już tak się nie robi. Skopiuj to co masz poniżej i masz grida taki jak chcesz - ale tak się już nie robi,
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 960px;
overflow: hidden;
margin: 0 auto;
}
.box {
width: 25%;
padding: 2%;
float: left;
box-sizing: border-box;
}
.col-1 {
background-color: grey;
height: 300px;
}
.col-2 {
background-color: yellow;
}
.col-2-1 {
width: 100%;
height: 100px;
background-color: white;
margin-bottom: 15px;
}
.col-2-2 {
width: 100%;
height: 100px;
background-color: aqua;
}
.col-3 {
background-color: green;
}
.col-3-1 {
width: 100%;
height: 100px;
background-color: white;
margin-bottom: 15px;
}
.col-3-2 {
width: 100%;
height: 100px;
background-color: aqua;
}
.col-4 {
background-color: grey;
height: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="col-1 box">
Menu lewe
</div>
<div class="col-2 box">
<div class="col-2-1"></div>
<div class="col-2-2"></div>
</div>
<div class="col-3 box">
<div class="col-3-1"></div>
<div class="col-3-2"></div>
</div>
<div class="col-4 box">
Menu prawe
</div>
</div>
</body>
</html>A jak się teraz robi?
Wejdź na strony które sprzedają szablony strom i pooglądaj np. themeforest.
Proponowałbym użycie Bootstrap’a w celu odświeżenia witryny zgodnie ze standardami RWD (Responsive Web Design). Framework, który Ci proponuję jest o tyle dobry, że jest popularny i bardzo łatwy w nauce. Jak pojmiesz konwencję siatki i kolumn to już reszta pójdzie z górki. 
Obrazki można zastąpić gradientami generowanymi przez przeglądarki:
Nawiązując do Twojego pytania, jak się teraz robi strony. Większość nowoczesnych stron dąży do tego aby nagłówek zawierał jak najmniej linków bo wygląda to estetycznie i nie dezorientuje użytkownika. Widzę że menu z lewej jest zależne od opcji wybranej w menu głównym, tu można byłoby użyć dropdown’y - fajne rozwiązanie, które pomoże Ci zaoszczędzić miejsca na stronie. Kolumna z prawej to content nadający się na oddzielne podstrony, nagłówek lub stopkę. W przyszłości pomyślałbym na Twoim miejscu nad użyciem ajax’a do niektórych rzeczy na stronie, ponieważ funkcjonalnością jest troszeczkę w tyle.
Jeżeli będziesz potrzebować jakichś konkretnych rad to śmiało pisz PW bo uwielbiam Bootstrap’a i wielę będę mógł Ci doradzić w zakresie pracy z nim. Życzę powodzenia i trzymam kciuki.
Dzięki za radę, być może skorzystam jak trochę rozluźni mi się grafik. Chciałem iść trochę na łatwiznę i próbowałem z CMS’ami - Joomla, WordPress… ale w każdym czułem się na każdym etapie ograniczany. Szablony, które w teorii były darmowe, jak już jakiś znalazłem, w praktyce okazywały się albo nie do końca przetłumaczone albo zawierające dodatkowe płatne funkcje, które jednak były dla mnie niezbędne. W końcu coś będę musiał w tym temacie podziałać bo mimo że moim zleceniodawcom te strony pasują, to ja mam jednak coraz mniej czasu żeby bawić się html’em z każdą pierdołą 
Z CMS’ów tylko Wordpress jest “całkiem” elastyczny a rozbudowana i czytelna dokumentacja ułatwiają pracę z tym systemem. Jeżeli nie chcesz używać czyichś rozwiązań to proponuję framework Codeigniter, który może nie jest jakiś super wypasiony, ale super sprawdza się w budowaniu stron takich jakie Ty tworzysz.