我有两个垂直 div，但第二个 div 的可变高度导致第一个 div 自身定位错误

Question

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

As you can see from the arrows in my attached picture, I'm trying to slide those four divs (Who's Online, Upcoming Events, Statistics, and Weather) UP to fill the void. The column on the right has a variable height, and when it expands, those four aforementioned divs continue to move down the page. They need to stay underneath the white box.

The problem with absolute positioning is that the four divs (Who's Online, Upcoming Events, etc.) will also have variable heights, so I don't want to stick the second row of those in an absolute position.

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

Rearrange your divs to be in 2 columns rather than 4 quadrants. You currently have:

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

Instead, arrange them like this:

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

That way, the midboxes will naturally flow under the phototicker. You will need to have a specific width on the right and left side divs and then just float the both left.