我的页脚在CSS中没有关注我的右侧和左侧内容，仅限于中间内容

好吧，这是我的问题：左侧浮动和右侧浮动不会放入我的容器中，页脚只关注中间内容部分。我究竟做错了什么？我可以用图片显示它，但我不能添加一个，因为我没有10个代表。它必须是一个简单的修复，我已阅读有关明确：都等，但所有不幸的工作。我的页脚在CSS中没有关注我的右侧和左侧内容，仅限于中间内容

#container 
{ 
    position: relative; 
    width: 58.5%; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #336600; 
    text-align: left; 

    } 
#header 
{ 
    height: 160px; 
    background-image:url(images/bannerboven.jpg); 
} 
#sideleft 
{ 
    position: absolute; 
    top: 160px; 
    left: 0; 
    float: left; 
    width: 22%; 
    background: #CCFFFF; 
    padding: 15px 10px 15px 20px; 
} 

#sideright 
{ 
    position: absolute; 
    top: 160px; 
    right: 0; 
    float:right; 
    width: 23%; 
    background: #CCFFFF; 
    font-size: 0.8em; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent 
{ 
    margin: 0 26% 0 26%; 
    padding: 0 10px; 
    background: #0F0; 
    } 
#footer 
{ 
    padding: 0 10px 0 20px; 
    background: #DDDDDD; 
    text-align: center; 
    font-weight: bold; 
    }

来源

2012-08-16 user1541645

请使用http://jsfiddle.net/或其他类似的服务创建演示。 – keaukraine 2012-08-16 10:41:32

你正试图绝对定位一些元素，并同时浮动它们。这总是会导致问题。它是一个或另一个。请发布您的HTML代码。 – 2012-08-16 10:42:31

张贴您的HTML和CSS jsfiddle.net在这里保存并发布URL请 – Chandrakant 2012-08-16 10:52:16

嗨，我检查你的代码，我想你想这个

HTML

<div id="container"> 
    <div id="header">Header</div> 

    <div id="mainContent"> 
    <div id="sideleft">Left</div> 
    <div id="sideright">Right</div> 
    </div> 

    <div id="footer">Footer</div> 

</div>

的CSS

#container 
{ 

    width: 58.5%; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #336600; 

    } 
#header 
{ 
    height: 160px; 
    background:red; 
    background-image:url(images/bannerboven.jpg); 
} 
#sideleft 
{ 
float:left; width: 22%; 
    background: #CCFFFF; 
    padding: 15px 10px 15px 20px; 
} 

#sideright 
{ 
float:right; 
    width: 23%; 
    background: #CCFFFF; 
    font-size: 0.8em; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent 
{ 
    padding: 20px 10px; 
    background: green; 
overflow:hidden; 
    } 
#footer 
{ 
    padding: 0 10px 0 20px; 
    background: #DDDDDD; 
    text-align: center; 
    font-weight: bold; 
    }

Live demo

来源

2012-08-16 11:09:54

Doens't有任何区别=/ – user1541645 2012-08-16 11:15:23

你想什么可以创建一个jsfiddle并给予链接........ – 2012-08-16 11:18:01

我只是希望横幅位于中间的3件物品下方，而不是仅位于mainContent之下。所以这就是它显示的错误： http://img210.imageshack.us/img210/4075/thesite.jpg 正如你所看到的横幅是不是在它的右边列应该是。 – user1541645 2012-08-16 11:23:11

我不知道你正在努力实现不知道你的HTML结构是什么，但问题的事实，你有你的左边和右边的容器绝对定位，以及一个floted定位造成的。

html元素的默认定位是静态的，所以您可以浮动所有东西或绝对定位所有东西。这里的东西，以帮助您了解的定位比较好，这是非常容易的，你会用自己的方式在5分钟：http://www.barelyfitz.com/screencast/html-training/css/positioning/

此外，你应该张贴的HTML一个jsfiddle链接包含，所以我们会更好地了解你是什么试图达到如果你需要进一步的帮助。我的猜测是Rohit Azad的解决方案是正确的，你只是无法理解定位。

来源

2012-08-16 11:37:16

我的页脚在CSS中没有关注我的右侧和左侧内容，仅限于中间内容

回答

相关问题