在半流體佈局中顯示內聯左列和主列

我正在修改magento中的現代主題，使其流體寬度達到1280px。在半流體佈局中顯示內聯左列和主列

一切似乎工作，除了我無法得到左列和主列（在2列左佈局）顯示內聯時，左列是一個固定的寬度和主列擴大填補其餘的空間。我得到這個工作的唯一方法是絕對定位左列，這不允許包裝器隨着左列內容一起展開。

希望這有一點意義。無論如何，這裏是我目前使用的HTML和CSS，以及我的臨時絕對定位修復。我嘗試過使用浮動內聯塊和其他一些方法，我通過谷歌發現，但似乎沒有工作。問題div是col-left和col-main。

任何幫助將不勝感激。

HTML：

<div class="page"> 

     <div class="main-container col2-left-layout"> 

      <div class="main"> 
       <?php echo $this->getChildHtml('breadcrumbs') ?> 
       <div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div> 
       <div class="col-main"> 
        <?php echo $this->getChildHtml('global_messages') ?> 
        <?php echo $this->getChildHtml('content') ?> 
       </div> 
     <div style="clear:both"></div> 

      </div> 

     </div> 

     <?php echo $this->getChildHtml('footer') ?> 
     <?php echo $this->getChildHtml('before_body_end') ?> 

    </div>

CSS

.page { width:80%; margin:15px auto 0; text-align:left; min-width:960px; max-width: 1280px;position:relative;} 
.main-container {position:relative;float:left;clear:both;} 
.main { background:#fff; border:1px solid #bbb;position:relative;float:left; padding-top:10px;width:100%;} 

/* Base Columns */ 
.col-left { width:220px;float:left;position:absolute; left:10px;top:10px;z-index:1000;} 
.col-main { padding:0px 10px 10px 220px; float:left; margin-left:20px; } 
.col-right { float:right; width:220px; padding:0 0 1px; }

來源

2012-06-15 Griffin