Question

基本上我正在布局一个网站，而我正在使用DIV来设置标题，左列，右列和页脚。我希望网站的内容部分可以扩展到插入的html /文本，所以我一直在使用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扩展为内容，并在左侧col旁边显示正确的col并且仍然有背景图像吗？

Answer 1

我不确定我是否理解你的问题，所以不要犹豫，指出我的方向正确。

基本上你想要链接：FAQ，Professional ... Facebook出现在右边？

为什么不使用经典：

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

我是正确的，还是我不明白你说的问题？

Answer 2

将overflow:hidden添加到#content。应该这样做。

XHTML CSS自动高度Div问题

2 个答案: