css - 如何扩展我的左容器

Question

我的网站有两个容器，一个侧容器和一个主容器。主容器通常比侧容器长，具体取决于网页。在某些网页上，侧容器比主容器短

例如

其他时候还好

我尝试过使用不同的position和margin，但我没有成功。

CSS:

#main-container {
background-color:#2e6366;
width: 610px;
padding:5px;
border-left: 3px solid #6e6c6c;
border-right: 3px solid #6e6c6c;
margin-top:-85px;
float:right;
padding-top:30px;
min-height:1205px;
}

#sidebars_container {
background-color:#2e6366;
width: 290px;
padding:5px;
border-left: 3px solid #6e6c6c;
border-right: 3px solid #6e6c6c;
margin-top:-85px;
float:left;
padding-top:30px;
min-height:1205px;
position:absolute;
}

HTML:

<div id="sidebox_container"> 
<div id="navigation"> <ul>
 <!-- BEGIN logged_in -->  
<li>
    <a href="/">

        Homepage
    </a>
</li>
<li>
    <a href="http://forum.pirate-zone.com">

        Forum
    </a>
</li>
<li>
    <a href="http://game.pirate-zone.com">

        Start Playing
    </a>
</li>
<li>
    <a href="/">

        Rankings
    </a>
</li>
<li>
    <a href="/">

        Task
    </a>
 </li>
 <li>
     <a href="/">

        Game Manual
    </a>
</li>
<li><a href="/">

        Characters & Skills
    </a>
</li>
<li>
    <a href="?acc=logout">

        Logout
    </a>
</li>
 <!-- END logged_in -->

      <!-- BEGIN logged_out -->  
<li>
    <a href="/">

        Homepage
    </a>
</li>
<li>
    <a href="http://forum.pirate-zone.com">

        Forum
    </a>
</li>
<li>
    <a href="http://game.pirate-zone.com">

        Start Playing
    </a>
</li>
<li>
    <a href="?acc=login">

        Login
    </a>
</li>
<li>
    <a href="/?acc=register">

        Register
    </a>
</li>
<li>
    <a href="/">

        Rankings
    </a>
</li>
<li>
    <a href="/">

        Game Manual
    </a>
</li>
<li>
    <a href="/">

        Characters & Skills
    </a>
</li>
 <!-- END logged_out -->
</ul></div>
    <div id="sidebox_news">News Ticker</div><div id="sidebox_news_bottom"><!-- BEGIN news --><div id="side_list"><span style="margin-top: 5px; margin-left: 10px; color:#52969a; font-size:20px; vertical-align: top; float: left; margin-right: 10px;">&#10008;</span>  

                                <p style="display: inline; float: left;">
                                <p id="username_top"><b><a href="http://wamp.pirate-zone.com/?page=news&amp;id={ID}">{NTITLE}</a></b></p>
                                    <p id="side_info"><b>{DATE}</b> </p>
                                </p>

                                <div class="clearfix">&nbsp;</div>
                                </div><!-- END news --></div>  

<div id="sidebox_news"> Site Poll</div><div id="sidebox_news_bottom"><!-- BEGIN poll --><div id="side_list"><span style="margin-top: 5px; margin-left: 10px; color:#52969a; font-size:20px; vertical-align: top; float: left; margin-right: 10px;">&#10008;</span>  

                                <p style="display: inline; float: left;">
                                <p id="username_top"><b><a href="http://wamp.pirate-zone.com/?page=news&amp;id=2">New Characters</a></b></p>
                                    <p id="side_info"><b>April 13, 2016, 5:48 AM</b> </p>
                                </p>

                                <div class="clearfix">&nbsp;</div>
                                </div>   <!-- END poll --></div> 

<div id="sidebox_news"> Statistics</div><div id="sidebox_news_bottom">
                         <!-- BEGIN stat -->
                          <p id="username_top"><b>Members</b></p>
                                <p style="display: inline; float: left;">
                                Total members: {TOT}
                                <br/>
Latest member:<span style="color:#fff"> <u>{NNAME}</u></span>
                                </p>
                                <br/><br/>
                                <p id="username_top"><b>Online:</b></p>
                                <p style="display: inline; float: left;">
                                 Admins online: <span style="color: #fff; font-style: normal;">{W}</span><br />
                    Moderators online: <span style="color: #fff; font-style: normal;">{M}</span><br />
                    Members online: <span style="color: #fff; font-style: normal;">{ME}</span><br />
                    Guests online: <span style="color: #fff; font-style: normal;">{G}</span>
                                </p>

                                <div class="clearfix">&nbsp;</div>
                                </div>

                            <!-- END stat --></div> 

</div> <!-- BEGIN profile -->
<div id="left-container" style="margin-top:-115px; width:720px; margin-right:-100px;">  <div id="location"><p>{SITELINK} > {AREA}</p></div> <img src="./template/luffy/images/dots.png" style="background-repeat:repeat-x; width:auto; height:12px; margin-bottom:5px;"/><img src="./template/luffy/images/dots.png" style="background-repeat:repeat-x; width:auto; margin-left:20px; height:12px; margin-bottom:5px;"/>

    <div class="avatar_area" style="margin-right:10px">
       <div style="margin: 15px auto 10px 15px; width: 100px; border: 2px solid #fff; border-radius: 25px; overflow: hidden; float:left">{AVATAR}</div> <span class="avatar_info" style="margin-top:10px;"> Username: <b>&nbsp;&nbsp;&nbsp;{PRONAME}</b> 
       <br/>
       &nbsp;&nbsp;{RANKIMG}
       <br/>
       &nbsp;&nbsp;&nbsp;&nbsp;Status:<b> {STATUS}</b>
       <br/>

       <span style="padding:5px;">&nbsp;&nbsp;Latest Activity: <a style=" margin-left:3px;"href="{FL}"><b>{PAGE}</b></a></span></span>


 </div>
 <!-- BEGIN logged_in --><div style="margin: 50px 0px 5px 10px;"><a href="?area=forum&s=mail&amp;action=new&amp;user={ID}"><img style="max-width:140px; margin-bottom: 10px;" src="./template/Luffy/images/pm.png" alt="" border="0"/></a><br/>{FRIEND}</div><!-- END logged_in -->

    <div class="clearfix" style="height: 30;">&nbsp;</div>

    <div style="float: left; margin-left: 20px;">
<div class="profile_info">
<div align="center" class="profile_info_header">Statistics</div>
<div style="padding: 10px;">
        <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp; Level: <span style="color: #52969a; font-weight:bold">{LEVEL}</span></p>
        <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp;Rank: <span style="color: #52969a; font-weight:bold">{RANK}</span></p>
        <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp;Experience Points: <span style="color: #52969a;font-weight:bold">{EXP}</span></p>

    <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp;Ratio: <span style="color: #52969a;font-weight:bold">{WIN}-{LOSS}</span></p>
    <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp;Streak: <span style="color: #52969a;font-weight:bold">{STREAK}</span></p>
    <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp; Height Streak: <span style="color: #52969a;font-weight:bold">+{STREAK}</span></p>
</div>
</div>
</div>

 <div style=" float: right; margin-right: 20px;">
<div class="profile_info">
<div align="center" class="profile_info_header">Crew information</div>
<div style="padding: 10px;">
        <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp; <font size="+3"><span style="color: #52969a; font-weight:bold">{CREW}</span></font>{CREWAVA}</p>
        <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp;Level: <span style="color: #52969a;font-weight:bold">{CLVL}</span></p>
        <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp;Rank: <span style="color: #52969a; font-weight:bold">{CREW_RANK}</span></p>
        <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp;Experience Points: <span style="color: #52969a;font-weight:bold">{CEXP}</span></p>

    <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color: #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted #444;">&nbsp;&nbsp;&nbsp;&nbsp;Joined On: <span style="color: #52969a;font-weight:bold">{CREWDATE}</span></p>
    <p style="font-family: Calibri, Arial, sans-serif; font-size: 15px; color:  #fff; padding: 10px 10px 5px 10px; border-bottom: 3px dotted  444;">&nbsp;&nbsp;&nbsp;&nbsp;Ratio: <span style="color: #52969a;font-weight:bold">{CWIN}- {CLOSS}</span></p>
</div>
</div>
</div>
        <div style="margin-top: 20px; margin-right: 20px; margin-left: 20px;">
 <div id="gameinfo"><div class="margin">&nbsp;</div>   <ul id="nav">

       <li class="selected" title="Ladder Games"><p style="padding: 10px; font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps;"><a href="#" style="font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps; text-decoration: none;" onclick="currenttab(0)">Ladder Games</a></p></li>

        <li class="notselected" title="Quick Games" alt=""><p style="padding: 10px; font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps;"><a href="#" style="font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps; text-decoration: none;" onclick="currenttab(1)">Quick Games</a></p></li>

        <li class="notselected" title="Private Battles"><p style="padding: 10px; font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps;"><a href="#" style="font-family: Calibri, Arial, sans-serif; font-size: 16px; color: #fff; font-variant: small-caps; text-decoration: none;" onclick="currenttab(2)">Private Battles</a></p></li>

    </ul></div><div id="games">

   <div id="game_list" style="display: none;">

        <div style="width: 560px; margin: 40px auto;">
            <p style="text-align: center; font-family: Calibri, Arial, sans-serif; font-size: 20px; color: #fff; text-decoration: underline; font-variant: small-caps; margin-bottom: 10px; margin-top: 10px;">No Ladder games have been done in the last 24 hours.</p>
        </div>

            <div class="clearfix" style="height: 0;">&nbsp;</div>
        </div>

     <div id="game_list" style="display: none;">

        <div style="width: 560px; margin: 40px auto;">
            <p style="text-align: center; font-family: Calibri, Arial, sans-serif; font-size: 20px; color: #fff; text-decoration: underline; font-variant: small-caps; margin-bottom: 10px; margin-top: 10px;">No quick games have been done in the last 24 hours.</p>
        </div>
    </div>
    <div id="game_list" style="display: none;">

        <div style="width: 560px; margin: 40px auto;">
            <p style="text-align: center; font-family: Calibri, Arial, sans-serif;  font-size: 20px; color: #fff; text-decoration: underline; font-variant: small-caps; margin-bottom: 10px; margin-top: 10px;">No private have been done in the last 24 hours.</p>
        </div>
    </div>
</div>

        <div style="clear: both;">&nbsp;</div>
        <div class="profile_signature">


            <div style="font-family: Calibri;">
                <br/>{SIGNATURE}</div>
        </div><div style="clear: both;">&nbsp;</div></div></div> <!-- END profile -->

Answer 1

如果对您有帮助，请检查此 fiddle 链接。 <强> DEMO

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#000;
    padding:20px;
    background-color:#F2F2F2;
    }
ul, li, ol {
    list-style-type:none;
    }

.wrapper {
    width:940px;
    padding:10px;
    overflow:hidden;
    height:100%;
    margin:0 auto;
    border:1px  solid green;
    background-color:#3D3A40;
    border:8px solid #fff;
}
.spacer {
    clear:both;
    font-size:0;
    line-height:0;
    height:0;
    }
p {
    padding-bottom:18px;
    }
#main-container {
    background-color:#2e6366;
    width:590px;
    border:3px solid #6e6c6c;
    padding:10px;
    /*float:right;
    min-height:1205px;*/
    display:table-cell;
}

#sidebars_container {
    background-color:#2e6366;
    width: 270px;
    border:3px solid #6e6c6c;
    padding:10px;
    /*float:left;
    min-height:1205px;*/
    display:table-cell;
}