[HTML + JS]홈페이지 제작 중인 대학생입니다.

과제로 인하여 홈페이지 제작중인 학생입니다.

현제 다음 그림과 같이 홈페이지를 제작중입니다.

그런데 제작하다 보니

다음 사진과 같이

중간 부분이 밀려나네요...

이걸

포지션 : 앱솔루트 말고 다른방법으로

고정 시킬수 있는 방법이 있을까요?

------------------------------------- 호버 이미지 소스 -----------------------------------------------------------------
*{
margin: 0px; padding: 0px;
font-family: '맑은 고딕', 'malgun Gotic', Helvetica Neue;
}

div #title{
width: 100%; margin-top: 100px;
}

p#header{
  text-align: center;
  font-size: 2.5em;
  color: #9a9a9a;
}

p#subheader{
  text-align: center;
  font-size: 1.3em;
  color: #cecece;
  margin-top: 20px;
}

header{
  margin: 0px auto;
  width: 960px; height: 150px;
  background-color: red;
}

div#one{
  background-color: #ee4a5d;
  overflow:hidden;
}
div#two{
  background-color: #a9acfc;
  overflow:hidden;
}
div#three{
  background-color: #46b8ff;
  overflow:hidden;
}
div#four{
  background-color: #32c323;
  overflow:hidden;
}
img.icon{
  display: block;
  margin: 10px auto;
  background-color: rgba(255,255,255,.15);
  width: 40px; padding: 20px;
  -webkit-border-radius: 50%;
  -webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
  -webkit-transition: box-shadow .8s;
}

p.text{
  font-size: 1.2em;
  color: white;
  text-align: center;
  padding-top: 20px;
  opacity: .6;
  -webkit-transition: padding-top .4s;
}

div.contents1{ width: 240px; height:167px;
  float: left;
  -webkit-transition: height .4s;
}

div.contents1:hover{
  height: 500px;    /*내려오는 길이*/
}

div.contents1:hover p.text{
  padding-top: 30px;
  opacity: 1;
}

div.contents1:hover img.icon{
  -webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,.6);
}

div.contents2{ width: 240px; height:167px;
  float: left;
  -webkit-transition: height .4s;
}

div.contents2:hover{
  height: 450px;    /*내려오는 길이*/
}

div.contents2:hover p.text{
  padding-top: 30px;
  opacity: 1;
}

div.contents2:hover img.icon{
  -webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,.6);
}

div.contents3{ width: 240px; height:167px;
  float: left;
  -webkit-transition: height .4s;
}

div.contents3:hover{
  height: 400px;    /*내려오는 길이*/
}

div.contents3:hover p.text{
  padding-top: 30px;
  opacity: 1;
}

div.contents3:hover img.icon{
  -webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,.6);
}

div.contents4{ width: 240px; height:167px;
  float: left;
  -webkit-transition: height .4s;
}

div.contents4:hover{
  height: 450px;    /*내려오는 길이*/
}

div.contents4:hover p.text{
  padding-top: 30px;
  opacity: 1;
}

div.contents4:hover img.icon{
  -webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,255,.6);
}
-------------------------------------------------------------------------------------------------------------
-----------------------------------------------------본문 ----------------------------------------------------
<html>

<head>

<title> sjisbmoc </title>

id = function(o){return document.getElementById(o);}

position = function(o, css){for(var i in css)o.style[i]=Math.round(css[i])+'px';}

setOpacity = function(o,alpha){

if(o.filters)o.filters.alpha.opacity = alpha*100;

else o.style.opacity = alpha;

}

diapo = {

N:0,

W:0,

H:0,

image_ratio:4/3,

ims:0,

imx:[],

thu:0,

pos:0,

xc:0,

xd:0,

xm:0,

dt:0,

xs:0,

move:false,

slide:function(){

with(this){

// ===== scrolling loop =====

xm += xs;

xc += (dt*xm*.01);

id('slider').style.left = Math.round(xc)+'px';

if (xm == 10) xs = -1;

if (xm) setTimeout('diapo.slide();', 16);

else {

// ===== enlighten pic =====

for(var i=.5;i<=1;i+=.1)setTimeout('setOpacity(diapo.ims[diapo.pos], '+i+')', 160*i);

setTimeout('diapo.move=false', 160);

}

cxd:function(p){

with(this){

// ===== calculates slider position =====

if(W/H>image_ratio){

wi = Math.round(H*(ims[p].width/ims[p].height));

xd = -imx[p]+((W-wi)/2);

} else xd = -imx[p];

// ===== display text =====

thu[p].className = 'selected';

}

scroll:function(p){

selPos = p;

with(this){

if(move){

// ===== already scrolling: queue event =====

setTimeout('diapo.scroll('+p+');', 128);

} else {

if(thu[p].className == 'loaded'){

// ===== start scrolling =====

cxd(p);

setOpacity(ims[pos], .4);

thu[pos].className = 'loaded';

pos = p;

dt = xd-xc;

xm = 0;

xs = 1;

move = true;

slide();

}

pos_button:function(x,y,w){

with(this){

// ===== button bar & text positioning =====

position(id('button'), {'z-index':1,'left':x+450,'top':y-25,'width':w,'height':H/25});

thu = id('button').getElementsByTagName('span');

for(var i=0;i<N;i++){

var wi = Math.round(w/N)-3;

position(thu[i], {'left':2+i*(wi+3),'width':wi});

if(ims[i].complete)thu[i].className = (i==pos)?'selected':'loaded';

}

resize:function(){

with(diapo){

// ===== resize layout =====

W=id('slider').offsetWidth;

H=id('slider').offsetHeight;

var w=0;

var h=0;

var x=0;

for(var i=0;i<N;i++){

if(ims[i].complete){

w=ims[i].width;

h=ims[i].height;

ims[i].style.visibility='visible';

setOpacity(ims[i], (i==pos)?1:.4);

if(W/H>image_ratio){

// ===== horizontal centering =====

wi = Math.round(H*(w/h));

position(ims[i], {'left':x,'top':0,'width':wi,'height':H});

imx[i] = x;

x += wi+3;

if(i==0) pos_button((W-wi)/2,H,160);

} else {

// ===== vertical centering =====

hi = Math.round(W/(w/h));

position(ims[i], {'left':x,'top':(H-hi)/2,'width':W,'height':hi});

imx[i] = x;

x += W+3;

if(i==0) pos_button(0,hi+(H-hi)/2,W);

}

if(xs==0)xc=xd;

}

// ===== reajust scroll position =====

if(!move){

cxd(pos);

position(id('slider'), {'left':xd});

}

images_load:function(){

with(this){

// ===== loop until all images are loaded =====

var M=0;

for(var i=0;i<N;i++) if(ims[i].complete) M++;

if(!move && ims[0].complete) resize();

if(M<N || move) setTimeout('diapo.images_load();', 128);

}

init:function(){

with(this){

// ===== images source =====

ims = id('slider').getElementsByTagName('img');

N = ims.length;

// ===== create buttons =====

for(var i=0;i<N;i++) {

o = document.createElement('span');

ims[i].alt = '';

o.onmousedown = new Function('diapo.scroll('+i+');');

id('button').appendChild(o);

}

images_load();

}

// ===== start script while loading images =====

function dom_onload()

{

if(id('slider')) diapo.init(); else setTimeout('dom_onload();', 128);

}

var selPos = 0;

var delay = 5000;

var th;

window.onload = function()

{

dom_onload();

// ===== window resize event =====

onresize = diapo.resize;

th = setTimeout(setImgPos,delay);

//max alert(diapo.N);

}

function setImgPos()

{

clearTimeout(th);

selPos++;

if(selPos>=diapo.N) selPos=0;

diapo.scroll(selPos);

th = setTimeout(setImgPos,delay);

}

function fnSetDelay(val)

{

delay = val;

}

</script>

</head>

        </div>
   <div id="header2">
    <div id="box1">
     <div id="img03">
      <A href="homepage.html" border=0><img src="http://postfiles4.naver.net/20140530_147/project_dwm_1401452310320Vgzt4_PNG/123.png?type=w2" WIDTH="200" HEIGHT="200" ALT="메인페이지" border="0"></a>
     </div>
    </div>
    <div id="box2">
     <div id='diapo'>

</div>

        </div>
    </div>
   </div>
   <div id="container0">
   <header>

    <div class="contents1" id="one">
     <img class="icon" src="pictures/icon1.png">
     <p class="text">제품디자인</p>
     </br><hr />

     <p class="text">제품의장점</p>
     <p class="text">제픔의구조</p>
     <p class="text">제품의설치과정</p>
     <p class="text">제품의설치예</p>
    </div>

    <div class="contents3" id="three">
     <img class="icon" src="pictures/icon3.png">
     <p class="text">커뮤니티</p>
     </br><hr />

     <p class="text">자유게시판</p>
     <p class="text">사용리뷰</p>
     <p class="text">건의게시판</p>
    </div>

    <div class="contents4" id="four">
     <img class="icon" src="pictures/icon4.png">
     <p class="text">고객지원</p>
     </br>
     <hr />
     <p class="text">Q&A</p>
     <p class="text">1:1 문의</p>
     <p class="text">제품의 구매안내</p>
     <p class="text">제품의 구매상담</p>
    </div>

   </div>
   </header>




   <div id="container1">
    <div id="cont1">
    <p>1</p>
    </div>
    <div id="cont2">
    <p>2</p>
    </div>
    <div id="cont3">
    <p>3</p>
    </div>
    <div id="cont4">
    <p>4</p>
    </div>


   </div>




   <div id="footer">
    <div id="footer1">
     <div id="char02"> DW-Mecha Engineering</div>
     <div id="char01">
          대표자 : 홍길동 사업자등록 :★★★-★★-★★★★★</br>
          경기도 △△시 △△구 △△△동 △△△번지 </br>
          대표번호: 031)□□□-□□□□ 팩스: 031)□□□-□□□□ </br>
          웹사이트/제품 서비스 문의: ▲▲▲▲-▲▲▲▲
     </div>
    </div>

    <div id="footer2">
     <div id="img01">
      <a href="#" class="button1 pulse-grow">고객센터</a>   
      <a href="#" class="button1 pulse-grow">사이트맵</a>  &nbsp
      <a href="#" class="button1 pulse-grow">로그인</a>  &nbsp
     </div>
    </div>
  </div>
  </div>

</body>

</html>
-----------------------------------------------------------------------------
CSS 는 빼서 해놨는데 JS는 뺼줄 몰라서 포함되어 있습니다 ㅠㅠ