XHTML CSS Auto Height Div問題

Question

基本上，我正在布置一個網站，並且使用DIV來具有頁眉，左列，右列和頁腳。 我想將網站的內容部分擴展為可插入其中的html / text，因此我一直在使用height：auto。

我將背景圖片用作頁眉的頂部，頁腳的底部和網站正文的1px高填充物。

我的問題是，如果我嘗試將右行設置在左行的右側而不在其下方，則我嘗試的所有操作基本上都消除了中間背景圖像。

我敢肯定這可能很簡單，但自從昨晚以來我就一直在研究它，而我快要解決這個問題了。

它是有效的XHTML和CSS（盡管jQuery UI的CSS3除外，但從結構上來說並不重要）。

有什么想法或有人可以向我介紹有關如何使用背景圖像獲取兩列布局的教程嗎？

<body>
   <div id="top">
         THE TOP IMAGE GOES HERE IN CSS
   </div>
   <div id="wrapper">
        <div id="header">

        </div>

        <div id="navigation">
                </div>

        <div id="content">
            <div id="left-col">

            </div>

            <div id="right-col">

            </div>

        </div>
   </div>

   <div id="bottom">
         THE BOTTOM IMAGE GOES HERE IN CSS
   </div>

   <div id="footer">

   </div>
</body>


#wrapper { 
 margin: 0 auto;
 width: 838px;
 background-image:url('../images/wrapper_bg.gif');
 background-repeat:repeat-y;

}
#header {
 width: 818px;
 color: #333;
 padding: 10px;
 height: 100px;
}

#navigation {
 width: 838px;
}

#content { 
 width: 838px;
 color: #333;
 margin: 0px 0px 0px 0px;

 /*min-height: 800px;*/
 height: auto;
}
#footer { 
 width: 838px;
 color: #333;
 text-align: center;

}

#top{
 margin: 0 auto;
 width: 838px;
 height:14px;
 background-image:url('../images/wrapper_top.gif');
}

#bottom{
 clear: both;
 margin: 0 auto;
 width: 838px;
 height:14px;
 background-image:url('../images/wrapper_bottom.gif');
}

#left-col{
 margin-left: 20px;
 width: 590px;
 float:left;
 height: auto;
}

#right-col{
 width: 170px;
 display: inline;

 height: auto;
 margin-right: 25px;
 color: #777777;
 font-size: 15px;
 padding: 5px;
 font-weight: bold;
}

網站是http://www.wholehealthconnect.org/home.php 。

誰能幫助我讓中間div擴展到內容，並且讓右列緊靠左列，並且仍然在其后附有背景圖片？

Answer 1

我不確定我是否正確理解了您的問題，因此請不要猶豫為我指明正確的方向。

基本上，您需要以下鏈接：FAQ，Professional ... Facebook出現在右邊？

為什么不使用經典：

#right-col {
  float: left;
  margin-left: 610px; /* or perhaps higher */
}

我是在正確的軌道上嗎？還是我不明白您所陳述的問題？

Answer 2

將overflow:hidden添加到#content 應該做。

XHTML CSS Auto Height Div問題

問題描述

2 個解決方案

解決方案1
0 已采納 2009-10-02 17:15:49

解決方案2
0 2009-10-02 18:55:34

XHTML CSS Auto Height Div問題

問題描述

2 個解決方案

解決方案1 0 已采納 2009-10-02 17:15:49

解決方案2 0 2009-10-02 18:55:34

解決方案1
0 已采納 2009-10-02 17:15:49

解決方案2
0 2009-10-02 18:55:34