XHTML CSS Auto Height Div問題

基本上我正在鋪設一個網站，我正在使用DIV的頭，左列，右列和頁腳。我希望網站的內容部分可以擴展到html /文本中，因此我一直使用height：auto。XHTML CSS Auto Height Div問題

我使用的是頁眉頂部，頁腳底部和網站正文的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擴大到內容以及在左上角旁邊有正確的列，仍然有他們背後的背景圖像？

來源

2009-10-02 mmundiff

我不確定我是否正確理解了您的問題，所以請不要猶豫，指出我正確的方向。

基本上你想要的鏈接：FAQ，Professional ... Facebook顯示在右邊？

爲什麼不使用經典的話：

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

我是正確的軌道還是我不理解你，說明什麼問題？

來源

2009-10-02 17:15:49

我試過了。它帶走了背景圖像，仍然在左下角。唯一的辦法是讓右邊欄出現在右邊並且仍然具有背景圖像，這是爲了使箱子具有不是我想要的靜態高度。 – mmundiff 2009-10-02 17:21:27

所以我添加了你的CSS，你可以看到這裏發生了什麼http://www.wholehealthconnect.org/home.php – mmundiff 2009-10-02 17:22:12

任何時候我嘗試漂浮右邊的col到左邊，我失去了背景圖像。我試着減小左右欄的寬度，但沒有奏效。我在這裏感到不知所措，並且一直在研究它幾個小時，甚至從頭開始重建它。 – mmundiff 2009-10-02 17:24:02

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

來源

2009-10-02 18:55:34

XHTML CSS Auto Height Div問題

回答

相關問題