3

I have simple site, with the classic elements: Container, Header, Content and Footer. The container has a background-color, which covers the whole content of the site (including header, content and footer). For some reason this won't work with floated elements within the container.

I have found a solution at StackOverflow, but it doesn't feel right. Solution is to set { display: table; } onto the container id.

The page:

<!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>

Does any has a decent solution for using floated elements within a container? And showing the container as overall background?

Colin
  • 759
  • 1
  • 5
  • 20

2 Answers2

2

Well, there is two classic solutions:

  1. Set "overflow: hidden;" to #container. It will clear floats but have drawback — if you have elements with "position: absolute;" inside container that must be positioned partially outside it, they will be cut by overflow.
  2. Use clearfix hack on #container: http://www.webtoolkit.info/css-clearfix.html it will fix it for you and don't have this drawbacks but is more complex.

Not sure is it better then "display: table;" or not, through.

Alexey Ivanov
  • 8,128
  • 2
  • 26
  • 27
0

Leave Display:table, it's not a good solution for a simple problem. You are starting with a simple layout, and it's a good practice to start with a clean and tested layout.

My favorite resources are:

Little boxes Free-css code sucks

good luck

Rdpi
  • 609
  • 1
  • 5
  • 13