如何擴展我的左側容器

我的網站有兩個容器，一個側面容器和一個主容器。根據網頁，主容器通常比側容器長。某些網頁上，側容器比主容器如何擴展我的左側容器

較短例如

等倍於其細

我已經使用不同position S和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 -->

來源

2013-07-09 user2562909

您可以添加HTML？ –

和/或網站的網址？ – Miro

爲什麼你將float賦值給「right」？ – Memolition

入住此撥弄鏈接，如果它可以幫助你。 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; 
}

來源

2013-07-09 04:30:14

它的作品謝謝 – user2562909

嘗試去除#sidebars_container的定義position屬性，並更改float:right;到left

來源

2013-07-09 04:09:56 Memolition

http://prntscr.com/1ecnfq它移動了它，它仍然是一樣的。 – user2562909

你改變了float：left;浮動：正確;？ – Memolition

是的，仍然一樣，只是把它移到右邊 – user2562909

如何擴展我的左側容器

回答

相關問題