Home/ Questions/Q 6718249
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:56:49+00:00

I have simple site, with the classic elements: Container, Header, Content and Footer. The

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0