Блог

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

Как вы можете видеть по стрелкам на прикрепленном рисунке, я пытаюсь переместить эти четыре раздела (кто онлайн, предстоящие события, статистика и погода) ВВЕРХ, чтобы заполнить пустоту. Столбец справа имеет переменную высоту, и когда он расширяется, эти четыре вышеупомянутых раздела продолжают перемещаться вниз по странице. Они должны оставаться под белым полем.

Проблема с абсолютным позиционированием заключается в том, что четыре раздела (кто онлайн, предстоящие события и т.д.) Также будут иметь переменную высоту, поэтому я не хочу вставлять второй ряд из них в абсолютное положение.

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;
}
  

Переставьте свои подразделения в 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>
  

Таким образом, промежуточные поля естественным образом будут проходить под фотокером. Вам нужно будет задать определенную ширину для правого и левого разделов, а затем просто переместить оба влево.