我有两个垂直的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上具有特定的宽度，然后将左侧的两个浮动。