[CSS] rozmieszczenie modułów vs. rozdzieczość ekranu

[neuromancer]

Witam, mam problem z rozmieszczeniem zawartości strony - staram się zaprojektować stronę i potrzebuję zrobić ją tak (przynajmniej na mój rozum - nie zajmowałem się tym wcześniej):


przyjmując, że biała przestrzeń to ekran, umieszczam logo na samej górze (100% width), to jest oczywiście trywialne, problem pojawia się potem - potrzebuję, żeby przestrzeń obszar1 wyświetlała się zawsze dokładnie w odległości 1/4 od lewego dolnego boku mojego logo. O ile jestem to w stanie zrobić to gdy tylko zmienię rozdzielczość to zawsze okazuje, że, że jest duży odstęp między logo, a obszar1

Może pokaże jeszcze na modelu:


Czerwona linia oddziela logo od obszaru gdzie chcę wstawić treść.
Czy istnieje jakiś sposób w CSS żeby właśnie "związać" dwa obszary, tak by położenie jednego zależało od wyświetlającego się loga?

tło oraz logo wstawiam tak samo, przez:

Kod:

<img class="source-image" src="images/grafika/logo.jpg" alt="" />

gdzie w pliku CSS .source-image jest zdefiniowany jako:

Kod:

img.source-image {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

logo oraz tło są w dużej rozdzielczości i przy pomocy tych instrukcji ładnie mi się wczytują od razu się skalując.
W ogóle jest jakiś sposób (jestem początkującym hobbistą jeśli chodzi o projektowanie stron) żeby przeglądarka zawsze traktowała, że masz rozdzielczość ustawioną np 1280x1024 i wyświetlała zawsze ten sam rozmiar zawartości strony (nawet w przypadku większej rozdzielczości)?
Będę wdzięczny za pomoc.