What is wrong with this CSS

HTML & CSS
1

Hi,

I am trying to put everything in a containing CSS area called #container (which has a border) but it is not recognising it unless I put some text after the CSS within the #container.

In other words: In the below code, if you remove the words “WHAT IS WRONG” you will see the #container moves up and does not house the #div container and it contents (#div1 and # div 2)? How can I make it so I do not have to write some text where “WHAT IS WRONG” is?

If I add ‘float:left;’ to #container it works. But I want it centred and it does not work if I write ‘centred’. I thought ‘margin:0 auto 0 auto;’ which I have included would be fine to centre it, which it does (but not when I write float left).

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>



#divcontainer {
width: 970px;
float: left;
}

#div1 {
width: 510px;
float: left;
}

#div2 {
width: 420px;
float: right;
}

#container {
	width:975px;
      margin:0 auto 0 auto;
      padding:5px;
      border:1px solid #cccccc;
      background:#ffffff;
	   }	  
</style>

</head>

<body>


<div id='container'>

<div id='divcontainer'>

<div id='div1'>
this is some text this is some text this is some text this is some text 
</div>
<div id='div2'>
this is some text this is some text this is some text this is some text 
</div>

</div>
WHAT IS WRONG
</div>

</body>
</html>

Thanks,

Matt.

2

Does “#divcontainer” need to be floated?

It seems to be working if I remove the float:left from #divcontainer, and clear the floats for div1 and div2. If you did need #divcontainer to be floated, you could wrap another div around it and float that. It starts behaving weirdly when you have floated elements directly within other floated elements.

Here is a jsfiddle that seems to be working: http://jsfiddle.net/7u5va/

To clear the floats for div1 and div2, I added a new div underneath them with the style clear:both. There are more elegant ways of doing this however, type “clearfix hack” or something similar into google to find out more.

3 

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style>

#container {
    width:975px;
    border:1px solid #ccc;
    background:#eef;
    padding:5px;
    margin:0 auto;
}

#divcontainer {
    overflow:hidden;
    background:#fee;
    outline:1px solid #f00;
}

#div1 {
    width:510px;
    float:left;
    background:#cff;
    outline:1px solid #0ff;
}

#div2 {
    width:420px;
    float:right;
    background:#cfc;
    outline:1px solid #0f0;
}

    </style>
</head>
<body>

<div id='container'>
    <div id='divcontainer'>
        <div id='div1'>
            <p>this is some text this is some text this is some text this is some text</p>
        </div>
        <div id='div2'>
            <p>this is some text this is some text this is some text this is some text</p>
        </div>
    </div>
    <p>floats need to be cleared.  See #divcontainer.</p>
</div>

</body>
</html>