[CSS][PHP]Zastąpienie ramek i stale menu Opcje

[123tomek]

Witam!
Potrzebuje szablonu który nie używa ramek ale pozwoli na to aby zarówno góra strony jak i panele boczne nie uciekały do góry podczas przewijania zawartości strony.
Czyli mniej więcej układ tradycyjny z górnym banerem strony, lewym panelem menu, prawym panelem dodatkowym i w środku zawartość strony ale tak wykonana że przy dużej ilości treści przewijał się tylko środek, natomiast boczne panele i górny baner pozostał na stałe na swoim miejscu.
Najlepiej gdyby to był czysty html, php i css.

Pozdrawiam

[123tomek]

Kod css:

[HTML] pobierz, plaintext 
body { /*glowne okno przegladarki*/
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: medium; /*small;*/
   background-color: #d2d3d5; /*#71bdef; /*glowny kolor tla - czyli cale okno przegladarki*/
   margin: 0px;
   padding: 0px;
   margin-top: 15px;
   text-align: justify;
}
 
#warper { /* RAMKA OTACZAJACA (cos jak cala kartka papieru osadzona w oknie przegladarki) */
   width: 785px; 
   margin: 0 auto;
   background-color: #d2d3d5; 
   border: 0px solid white
}
 
#header { 
   background: url("images/naglowek.jpg") no-repeat;
   background-color: #d2d3d5;
   width: 775px; 
   height: 136px;
   border: 0px solid white;
   margin: 0 auto;
}
 
.menugora{
	text-align:right;
	}
.menugora a{     
	color: #606060; 
	font-size: 14px; 
	font-family:Arial; 
        font-style: italic;
	text-decoration:none;
	padding-left:34px;
	padding-right:18px;
	}
 
.menugora a:hover {
	color: #ec008c;
 
}
 
#header h1 { 
   color: #e7e7e9;
   font-size: 0px;
   font-family: Arial, Helvetica, sans-serif;
   margin-left: 75px;
   margin-top: 0px;
}
 
 
#content { /* TRESC STRONY */
   width: 570px; 
   background-color: #d2d3d5;
   padding-bottom: 0px;
   float: left;
}
 
#content p {
   padding-left: 20px;
   padding-right: 30px;
}
 
#content h2 {
   padding-top: 45px;
   padding-left: 20px;
   font-size: x-large;
   font-family: Arial, Helvetica, san-serif;
   font-weight: normal;
}
 
#content p:first-letter {
  color: #ec008c; 
  font-family: 'Comic Sans MS', 'Times New Roman', Arial, Veranda, Helvetica;
  font-size: 200%; 
  vertical-align: text-bottom; 
  }
 
#content h2 {
   color: #ec008c; 
   font-size: x-large;
   font-family: Arial, Helvetica, sans-serif;
   margin-left: 0px;
   margin-top: 0em;
   margin: 0;
   padding: 0;
}
 
#navigation { 
   width: 256px 
   height: 460px; 
   margin-left: 5px; 
   background-color: #d2d3d5;
   float: left;
   font-style: italic;
   font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
   font-size: medium;
}
 
#navigation p { 
   margin-top: 15px;
   margin-left: 20px;
   font-size: small; 
   font-weight: bold;
   font-style: italic;
   font-family: Arial, Helvetica, Sans-serif;
   text-align:center;
   width: 155px;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 71px;
 
}
 
#navigation ul, #navigation ul li { 
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
 
#navigation ul li {
	width: 200px; /* szerokosc klocka menu*/
	height: 38px; /* wysokosc klocka menu*/
	padding-left: 10px; /* odleglosc od lewej krawedzi do poczatku klocka menu */
	background: url("images/menu_linia.png") no-repeat right top; 
}
 
#navigation ul a:link, #navigation ul a:visited {
	display: block;
	width: 170px;
        height: 16px; 
	text-decoration: none;
	text-align:left;
	color: #606060; 
	padding: 3px 22px 7px 10px; 
	font-weight: bold;
}
 
#navigation ul a:hover {
	color: #ec008c ;
}
 
#blockquote { /*"Ramka w ramce"*/
   width: 330px;
   margin-left: 10px;
   margin-right: 20px;
   background-color: #55bedf;
   font-size: small;
   font-family: Verdana, Arial, Helvetica, Sans-serif;
   font-weight: bold;
   padding-bottom: 20px;
   float: right;
   margin: 0 auto;
}
 
#footer { /* STOPKA */
   width: 775px; /*990px*/
   height: 25px;
   border: 4px solid #d2d3d5; 
   margin: 0 auto;
   background-image: url(images/dol.png);
   text-align: left; 
   font-size: x-small;
   background-color: #d2d3d5; 
   clear: both;
}
 
#footer span {
   font-weight: bold;
   color: white;
}
 
#footer a:link, #footer a:visited {
 
  margin-left: 15px;
  color: #606060;
  font-size: 8px;
  font-family: Arial, Helvetica, Sans-serif;
  font-style: italic;
  font-weight: bold;
  vertical-align: top;
}
 
#footer a:hover {
   color: #ec008c; 
   font-size: 8px;
   font-family: Arial, Helvetica, Sans-serif;
   font-weight: bold;
   padding-bottom: 20px;
} 
 
/* Poczatek tabel */
TABLE {
  border: solid 0px black;
  border-collapse: separate;
  margin: 0 auto;
}
 
THEAD {
  background-color:#C0C0C0;
}
 
TBODY {
  background-color:#9bcff4;
}
 
TFOOT {
  background-color:#FFFFC0;
}
 
TFOOT TD {
  font-size:xx-small;
  text-align:right;
}
 
TD {
  font-style:italic;
  text-align:left;
}
 
CAPTION {
  font-style:italic;
  text-align:center;
}
 
CAPTION SPAN {
  font-weight:bold;
}
 
[scope="cena"] {
  color:black;
  font-style:italic;
  font-weight:bold;
  text-align:right;
}
 
[scope="row"] {
  color:black;
  padding: 10px 5px 10px 5px;
  text-align:center;
}
 
[scope="col"] {
  color:navy;
  background-color:#C0C0C0;
  padding:5px;
  text-align:center;
}
/* Koniec tabel */
 
[HTML] pobierz, plaintext 

Część kodu php:

[HTML] pobierz, plaintext 
 
<body>
  <div id="warper"> <!-- warper - stopka (podklad, kartka) -->
  <div id="header"><!-- header - naglowek -->
  <div class="menugora">
             <a alt="firma" href="index.php?id=firma"> o firmie </a>
             <a alt="kontakt" href="index.php?id=kontakt"> kontakt </a>
             <a alt="dojazd" href="index.php?id=dojazd"> dojazd </a></div>
    <div><img src="images/logo0.gif" style="padding-left: 259px; padding-top: 0px;" alt="logo" />
    </div>
 
  </div> <!-- header - naglowek -->
 
  <div id="navigation"> <!-- navigation - sekcjia nawigacyjna (lewa czesc gdzie menu) -->
    <ul class="menu">
      <li><a href="index.php?id=glowna">Główna</a></li>
      <li><a href="index.php?id=firma">O Firmie</a></li>
      <li><a href="index.php?id=kontakt">Kontakt</a></li>
      <li><a href="index.php?id=dojazd">Dojazd</a></li>
    </ul>
    <a><img src="images/bannerek_firmy.gif" style="display: block; margin-left: 110px;" alt="banerek" /></a>-->
 
  </div> <!-- navigation - sekcjia nawigacyjna (lewa czesc gdzie menu) -->
 
  <div id="content"><!-- content - tresc strony -->
    <!-- Tutaj jest wstawiana treść z plików zewnętrznych -->
      <?php
      if(empty($_GET['id']) or $_GET['id']=="glowna"){include("glowna.html");}
      if($_GET['id']=="firma"){include("firma.html");}
      if($_GET['id']=="kontakt"){include("kontakt.html");}
      if($_GET['id']=="dojazd"){include("dojazd.html");}            
      ?>
  </div><!-- content - tresc strony -->
 
  <div id="footer"><!-- footer - stopka --> 
  </div> <!-- footer - stopka -->
</div> <!-- warper - stopka (podklad, kartka) -->
 
<map name="menu" id="menu">
<area alt="firma" shape="rect" coords="454,2,570,28" href="#firma" alt="" />
<area alt="kontakt" shape="rect" coords="625,2,696,28" href="#kontakt" alt="" />
<area alt="dojazd" shape="rect" coords="697,2,764,28" href="#dojazd" alt="" />
</map>
</body>
 
[HTML] pobierz, plaintext 

Po dodaniu do #navigation oraz #header position: fixed; cały układ się rozsypuje, content przesuwa się pod menu oraz pod nagłówek.
Próbowałem dodać dodatkowy blok z position: fixed; w którym zawierałaby się treść strony (content) ale dalej treść ucieka pod baner.
Nie bardzo potrafię poukładać bloki tak by menu oraz nagłówek były na stałe na stronie a przewijanie działało tylko na treść (content) ale w taki sposób by nie przewijało się pod nagłówek i nie wychodziło nad nim.