Fotter и два блока. Что мешает ?

<style type="text/css">
    html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px; }  
    max-hieght:500px;
    min-hieght:500px;
body{font: 40% Sans-serif;}
  p.italic {font-style:italic}
p{margin:0 5px 0px}
a{display:block;color: #981793;padding:0px}
  
    div#header h1 {position:absolute; min-width:20%; width:100%; line-height:80px; margin:0%; padding-left:50%; background-image: url(http://www.zastavki.com/pictures/1920x1200/2011/3D-graphics_Unusual_wave_030557_.jpg); background-size:100% 100px; color:#fff; }
    
div#wrapper{float:right; width:100%;}
 
    #content{position:relative;  margin-top:82px; margin-left:27%;  width:46%; }
#content p{padding:5px; line-height:2.0; background-image:url(http://www.design-warez.ru/uploads/posts/2009-09/1252267959_19088605_15452105_13674749_00000330.jpeg); bottom: 0}
    div#content p{text-shadow:#98FB98 3px 3px 5px; float:right; ;color:#FFFAFA; border-top-left-radius: 10px; border-top-right-radius: 10px; border-width:5px; padding:3px; }
    .ex1 {margin:0px; padding:2px;  height:110px; box-shadow: 3px 2px 4px #A9A9A9; border-radius:100%; border: 2px solid #bfa22c; float:left; } /*внутри блока класс,изображение расположенно слево*/
  p{text-indent: 50px; /* Отступ первой строки в пикселах */ }
    
    div#extra{position:relative; float:right; background:#cfb53b; border-radius: 5px; height:805px; margin-bottom:0px; padding:5px;}/*оранжевая колонка*/
    div#extra{ margin:0; top:-186px; text-align:center; text-decoration:none; min-width:20%; max-width:25%;}
 
    div#footer{ margin:0; padding:0;position:absolute; background: #333; color:#FFF; border-radius:10px; bottom:-374px; width:100%; min-height:1%;}
    #footer{}
    div#navigation{position:relative; float:left; background:#bef574; width:25%; height:805px; font-size:1.5px;  line-height:1.5px; border-radius: 5px; margin:0; top:-186px;padding:5px;} /*голубая колонка*/
  
 div#navigation p{ list-style-type:none;} 
/*стили всего блока меню, пунктов и ссылок*/
.verticalnoe {
  display: block;
  background: #3D0066;
  border-radius: 7px;
  padding: 0;
  margin: 4px;
  width: 160px; /*ширина меню и выпадающих блоков*/
  min-width:10%;
  float:left;
  height:0;
  outline-style:none;
  }
.verticalnoe li {
  position: relative;
  list-style: none;
  outline: none;
  background: #7339BA;
  background: -moz-linear-gradient(top, #6323b2 0%, #b685f7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6323b2), 
color-stop(100%,#b685f7));
  background: -webkit-linear-gradient(top, #6323b2 0%,#b685f7 100%);
  background: -o-linear-gradient(top, #6323b2 0%,#b685f7 100%);
  background: -ms-linear-gradient(top, #6323b2 0%,#b685f7 100%);
  background: linear-gradient(to bottom, #6323b2 0%,#b685f7 100%);
  border: solid 1px #D6C2FF;
  border-radius: 5px;
  padding: 4px;
  margin: 5px;
/*анимация для пунктов*/
  -webkit-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  -moz-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  -o-transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
  transition: margin 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
.verticalnoe li:hover {
  background: #ccf;
  border: solid 1px transparent;
  border-radius: 5px;
  box-shadow: inset 0 0 8px #fff;
  margin: 2px 10px;
 
}
.verticalnoe a {
  display: block;
  text-decoration: none;
  text-align: left;
  font: normal normal 14px Verdana; /*шрифт всех пунктов*/
  color: #E6E6FF;
  text-shadow: 1px 0 4px #000, 2px 0 7px #d91cd9;
  box-shadow: none;
  padding: 2px; /*регулируем выоту всех кнопок меню*/
  margin: 3px;
}
.verticalnoe a:hover {
  color: #3D1F4C;
  text-shadow: 1px 0 4px #fff, 2px 0 7px #290052;
}
/*стиль пункта с подменю*/
.drop-link > a {
  margin: 3;
  -webkit-transition: margin 0.5s ease;
  -moz-transition: margin 0.5s ease;
  -o-transition: margin 0.5s ease;
  transition: margin 0.5s ease;
}
.drop-link > a:hover {
  margin: 0 0 0 1px;
}
.drop-link:hover {
  background: #ccf; /*выделяем ссылку родитель выпадающего блока*/
}
/*стили для уголков*/
.drop-link:after,
.drop-link:before {
  content: '';
  position: absolute;
  right: 0px;
  top: 0;
  padding: 0;
  margin: 0;
}
.drop-link:before {
  border: solid 14px;
  border-color: #D6ADFF transparent transparent transparent;
  margin: 0 11px 0 0;
}
.drop-link:after {
  border: solid 10px;
  border-color: #4C1A80 transparent transparent transparent;
  margin: 0 15px 0 0;
}
.drop-link:hover:before {
  border: solid 10px;
  border-color: transparent #6323b2 transparent transparent;
  margin: -3px 0 0 0;
}
.drop-link:hover:after {
  border: solid 1px;
  border-color: transparent #b685f7 transparent transparent;
  margin-right: 0;
}
.drop-block {
  display: block;
  position: absolute;
  z-index: 1000;
  left: 100%; /*если меню справа - right: 100%;*/
  top: -9999px; /*скрываем выпадающие блоки*/
  background: #3D0066;
  border: solid 1px #B84DFF;
  border-radius: 10px;
  box-shadow: 0.5em 0em 0em #666; /*если меню справа - box-shadow: -0.5em 1em 1em #666;*/
/*анимация для выпадающих блоков*/
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0;
  padding: 0;
  margin: -10px -10px 0 0; /*если меню справа - margin: -10px -10px 0 0;*/
  min-width: 20px; /*обычная ширина*/
   /*ширина если строка без пробелов и переносов*/
}
.drop-link:hover > .drop-block {
  top: 8px; /*показываем выпадающие блоки*/
  opacity: 1;
}
</style>
</head>
<body>
  
<div id="container">
<div id="header"><h1><i>Помощник КЦ</i></h1> </div>
 
<div id="wrapper">
              <div id="content">
<p>
  <img class='ex1' src="http://upload.akusherstvo.ru/image566594.jpg"/>
  <u><script type="text/javascript">
var h=(new Date()).getHours();
      if (h > 23 || h < 7) document.write("Доброй ночи!");
if (h > 6 && h < 12) document.write("С добрым утром!");
if (h > 11 && h < 19) document.write("Добрый день!");
if (h > 18 && h < 24) document. write("Добрый вечер!");
      </script></u> <br>
    
  На этой страничке Вы найдете много информации в для работы с клиентами в КЦ.<br />
  Воспользуйтесь ссылками для поиска необходимой информации!<br />
  Бог в помощь!
    </p>
</div>
</div>
<div id="navigation">
 
<ul class='verticalnoe'>
  <li><a href="#">Спутники</a>
  <li><a href="#">Хабы</a>
<li class='drop-link'><a href="#">Модемы</a>
<ul class='drop-block'>
      <li><a href="#">HN</a>
      <li class='drop-link'><a href="#">HX</a>
<ul class='drop-block'>
  <li><a href="#">Данные</a>
           <li><a href="#">Особенности</a>
           <li><a href="#">Характеритики</a></ul></li>
<li><a href="#">SerfBeam@2</a>
</ul></li>
  <li class='drop-link'><a href="#">Шаблоны ответов</a>
 
    <ul class='drop-block'>
      <li><a href="#">IndiVsat</a>
      <li><a href="#">Ka-Sat</a>
      <li><a href="#">Altegrohome</a>
      <li><a href="#">Корпоратив иное</a>
      <li><a href="#">Частники иное</a>
    </ul>
  </li>
 
  <li><a href="http://altegrosky.ru/txt_324_detail.html">Оборудование</a>
</ul>
 
</div>
<div id="extra" >
  <p><input type="button" value="КЦ" onclick="Ohran1()" />
    <script type="text/javascript">
  function Ohran1( ) {document.getElementById("extra").innerHTML="Сообщение"; }
    <a href="D:\Полезные папки и файлы"></a>
  </script><hr/>
<script type="text/javascript">
   dat=new Date();
   Bum=dat.getDay();
    switch(Bum){
     case 6: case 7: document.write('<h1>'+"Сегодня Выходной УРАААААА"+'</h1>');
        break; default: document.write('<h3>'+"А сегодня рабочий день!"+'</h3>')};
  </script>
  
  
  </div>
 
  <div id="footer">
 
<p> <a href="mailto: peryshkin-max@mai.ru" style="color:red; text-align:left; text-style:Century;" >Пишите сюда: peryshkin-max@mai.ru</a>Документ обновлен <script 
type="text/javascript">document.writeln(document.lastModified);</script> </p>
 
</div>
</div>