Prawidłowy układ strony - problem z rozdzielczością

Jako początkujący w tym temacie mam pewne pytanie.

Napotkałem pewne problemy z wyglądem strony w różnych rozdzielczościach i przeglądarkach.

Na początek dam, mały obrazek o co mi chodzi :

64615739.th.jpg

Na obrazku powyżej obramowanie to okno przeglądarki, w którym jest strona internetowa.

Załóżmy, że w css ustawiam sobie jakieś tło (na obrazku to zielone) - i chcę stworzyć u góry na nim przy krawędzi menu (czarne).

Dodaję zatem nowy obrazek graficzny (menu) i za pomocą padding i/lub margin (wpisując liczbę px) przesuwam je odpowiednio od lewej krawędzi tak aby było na równi z tłem zielonym (tak jak to jest przy obrazku Firefox).

I w ten sposób jeżeli ktoś ma inną przeglądarkę niż moja np. IE albo inną rozdzielczość to marginesy są większe i wpisana przeze mnie liczba px jest inna niż on ma, dlatego u niego będzie się to krzaczyło ?

Jak w takim razie zrobić uniwersalną stronę, aby działała ona w każdej rozdzielczości i pod każdą przeglądarką (mogą być małe wyjątki).

PS: A czy ktoś miałby na tyle siły i chęci, aby pomógł mi poskładać w CSS stronę - jest ona niewielka, grafikę mam przygotowaną i pokazaną jak ma wyglądać - pozostaje kwestia napisania kodu (napisałem sam, ale właśnie są problemy o których piszę ).

Ustawienie elementów za pomocą padding i margin to generalnie zły pomysł. Lepiej odpowiednio po-zagnieżdżać divy, nadać im odpowiedni align. Dla przykładu sytuacja z zamieszczonego przez Ciebie obrazka:

Jakaś treść

#page{

   width: 800px;

   background-color: #ff0000;

}

#header{

    width: 100px;

    background-color: #000000;

    float:left;

}

Coś w tym stylu. Może być jakiś błąd bo nie próbowałem tego, ale powinno zadziałać.