我有兩個垂直的div，但第二個div的高度可變導致第一個misposition本身

Question

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

正如你可以從我的圖片附件的箭頭看到，我試圖滑動這四個申報單（誰在線，即將發生的事件，統計數據和天氣）填補空白。右側的列具有可變的高度，並且當它擴展時，這四個前面的div繼續向下移動頁面。他們需要留在白色盒子下面。

絕對定位的問題是，四個div（Who's Online，即將發生的事件等）也將具有可變高度，所以我不想將這些絕對位置的第二行粘在一起。

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上具有特定的寬度，然後將左側的兩個浮動。