나는 두 개의 수직 div의가 있지만, 두 번째 DIV의 변수 높이가 첫 번째 당신이 내 첨부 된 그림의 화살표에서 볼 수 있듯이

Question

http://denartcc.org/images/help.jpg

자체 misposition 원인이되고, 나는 (그 4 개 된 div를 밀어하기 위해 노력하고있어 누가 온라인인지, 예정된 이벤트인지, 통계인지, 날씨인지)를 채우기 위해 UP. 오른쪽의 열은 가변 높이를 가지며 확장되면 위에서 언급 한 네 개의 div가 페이지 아래로 계속 이동합니다. 그들은 흰색 상자 밑에 있어야합니다.

절대 위치 지정의 문제점은 4 개의 div (Who 's Online, Upcoming Events 등)도 가변 높이를 가지므로 절대 위치에서 두 번째 행을 고집하고 싶지는 않습니다.

HTML

<div id="TopContentWrapper"> 
    <div id="phototicker"> 
    <jdoc:include type="modules" name="phototicker" /> 
    </div> 
    <div class="RightSide"> 
     <div class="rtsidemod"> 
      <div class="rtsidetitle">Control Panel</div> 
      <div class="rtsidecontent"><jdoc:include type="modules" name="controlpanel" /></div> 
     </div> 
     <div class="rtsidemod"> 
      <div class="rtsidetitle">Newletter</div> 
      <div class="rtsidecontent"><jdoc:include type="modules" name="newsletter" /></div> 
     </div> 
     <div class="rtsidemod"> 
      <div class="rtsidetitle">Event Notifications</div> 
      <div class="rtsidecontent"><jdoc:include type="modules" name="eventnotifications" />Check Check</div> 
     </div> 
     <div class="rtsidead"> 
      <img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/forum.png"></img> 
     </div> 
     <div class="rtsidead"> 
      <img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/ts.png"></img> 
     </div> 
     <div class="rtsidead"> 
      <img src="http://denartcc.org/dev/templates/NexGenDEN/images/ads/ts.png"></img> 
     </div> 
    </div> 
    <div class="midbox1"> 
     <div class="modbox"> 
      <div class="modtitle">Who's Online 
      </div> 
      <div class="mid1"> 
       <p class="mid"><jdoc:include type="modules" name="whosonline" /></p> 
      </div> 
     </div> 
     <div class="modbox"> 
      <div class="modtitle">Upcoming Events 
      </div> 
      <div class="mid2"> 
       <p class="mid"><jdoc:include type="modules" name="upcomingevents" /></p> 
      </div> 
     </div> 
    </div> 
    <div class="midbox2"> 
     <div class="modbox"> 
      <div class="modtitle">Statistics 
      </div> 
      <div class="mid1"> 
       <p class="mid"><jdoc:include type="modules" name="statistics" /></p> 
      </div> 
     </div> 
     <div class="modbox"> 
      <div class="modtitle">Weather 
      </div> 
      <div class="mid2"> 
       <p class="mid"><jdoc:include type="modules" name="weather" /></p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#TopContentWrapper { 
width:920px; 
margin:0 auto; 
position:relative; 
} 
div.RightSide { 
width:255px; 
float:left; 
margin-left:5px; 
} 

div.rtsidemod { 
float:left; 
width:100%; 
padding-bottom:5px; 
background-image:url(../images/rightbg.png); 
background-repeat:repeat-y repeat-x; 
} 

div.rtsidetitle{ 
font-weight:bold; 
color:white; 
font-size:12px; 
background-image:url(../images/rttitlebg.png); 
background-position:top left; 
height:15px; 
} 

div.rtsidetitle:hover { 
background-position:bottom left; 
} 

div.rtsidecontent { 
font-size:11px; 
color:white; 
} 

div.rtsidead { 
width:255px; 
float:left; 
margin:5px 0 0 0px; 
border:1px solid black; 
} 

div.modtitle { 
width:322px; 
height:15px; 
font-size:12px; 
color:white; 
font-weight:bold; 
background:url(../images/midmodbg.jpg); 
background-repeat:repeat-x; 
} 

div.mid1 { 
display:block; 
float:left; 
background-image:url(../images/midmodcontentbg.png); 
background-repeat:repeat-both; 
width:320px; 
border:1px solid black; 
border-top:none; 
height:70px 
} 

div.mid2 { 
display:block; 
float:left; 
background-image:url(../images/midmodcontentbg.png); 
background-repeat:repeat-both; 
width:320px; 
border:1px solid black; 
border-top:none; 
height:70px 
} 

div.modbox { 
float:left; 
width:310px; 
margin-right:19px; 
margin-top:5px; 
} 

div.midbox1 { 
float:left; 
width:660px; 
margin:0px 0 0px 5px; 
padding:0; 
} 

div.midbox2 { 
float:left; 
width:700px; 
margin:0px 0 0px 5px; 
padding:0; 
} 

Answer 1

는 div의 2 열보다는 4 사분면에있을 정렬합니다. 현재이 :

<div id="phototicker"> 
    ... 
</div> 
<div class="RightSide"> 
    ... 
</div> 
<div class="midbox1"> 
    ... 
</div> 
<div class="midbox2"> 
    ... 
</div> 

는 대신,이처럼 배열 :

<div class="LeftSide"> 
    <div id="phototicker"> 
     ... 
    </div> 
    <div class="midbox1"> 
     ... 
    </div> 
    <div class="midbox2"> 
     ... 
    </div> 
</div> 
<div class="RightSide"> 
    ... 
</div> 

그 방법의 midboxes 자연스럽게 phototicker에서 흐를 것이다. 오른쪽 및 왼쪽면 div에 특정 너비가 있어야하고 양쪽 모두를 떠 있어야합니다.