У меня простой сайт, с классическими элементами: Контейнер, Заголовок, Контент и Нижний колонтитул. Контейнер имеет цвет фона, который охватывает весь контент сайта (включая верхний и нижний колонтитулы). По некоторым причинам это не будет работать с плавающими элементами внутри контейнера.
Я нашел решение в StackOverflow, но это не так. Решение состоит в том, чтобы установить {display: table; } на идентификатор контейнера.
Страница:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
body
{
background-color: #999;
font-family: Tahoma;
font-size: 12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin: 0px;
padding: 0px;
}
h1
{
color: green;
font-family:Tahoma;
font-size: 26px;
font-weight: bold;
margin: 5px 0;
text-indent: 10px;
width: 100%;
}
#container
{
background: #FFF;
margin: 0 auto;
width: 950px;
position: relative;
}
#header
{
position: relative;
height: 100px;
width: 950px;
}
#content, #content-ext
{
float: left;
margin: 0;
width: 950px;
}
#nav
{
float: left;
padding: 10px 10px 10px 0;
width: 200px;
}
ul#menu
{
cursor: pointer;
display: block;
list-style: none outside none;
margin: 0 auto;
padding: 0;
text-align: left;
width: 200px;
}
ul#menu li
{
margin: 0;
padding: 0;
}
ul#menu li a
{
color: #111;
display: inline-block;
height: 50px;
font-size: 18px;
line-height: 60px;
margin: 0 auto;
padding: 0 0 0 10px;
text-decoration: none;
width: 100%;
}
#mainImg
{
background: #111;
height: 150px;
float: right;
margin: 0 0 20px 0;
width: 710px;
}
#main-content
{
float: right;
width: 710px;
}
#extra
{
float: left;
width: 500px;
}
#contact
{
float: left;
width: 450px;
}
#footer
{
color:#999;
height:20px;
width:950px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>test</h1>
</div>
<div id="content">
<div id="nav">
<h1>Menu</h1>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="mainImg"></div>
<div id="main-content">
<h1>Welkom</h1>
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed arcu arcu, a interdum metus. Aenean vel libero nulla. Nulla facilisi. Maecenas malesuada libero a ante vulputate vestibulum. Cras id neque vitae lectus luctus tempor non non risus. Morbi aliquam porttitor facilisis. Sed pulvinar erat sit amet est auctor tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget arcu lorem, non accumsan ipsum. Donec venenatis adipiscing massa, sed molestie augue ullamcorper et.</strong>
<br/><br/>
Morbi id eros vitae risus tristique bibendum. Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel, volutpat eget sapien. Proin tempus nunc sit amet ligula viverra hendrerit. Donec tempus tristique risus. Fusce at semper est. Etiam ligula est, varius ut tempus at, laoreet bibendum eros. In hac habitasse platea dictumst.</p>
</div>
</div>
<div id="content-ext">
<div id="extra">
<h1>Extra</h1>
<p>Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel..</p>
</div>
<div id="contact">
<h1>Contact</h1>
<p>Quisque nec metus sit amet nunc tincidunt vehicula sit amet non nibh. Nullam risus orci, porttitor ut malesuada vel..</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Есть ли у кого-нибудь достойное решение для использования плавающих элементов внутри контейнера? И показывает контейнер в качестве общего фона?