[SOLVED] css sudden loss of second opposite floated element?

css sudden loss of second opposite floated element?

I have this very simple code with one container element and two internal elements h1 and h2 both floated in opposite directions. However when I apply that second element is missing eventhough I set bellow the empty paragraph tag with the property clear:both just to be certain that parent-collapse isn't going to happen. However second element still seems to be missing? Here is my html code:

<body>
    <div id="container">
        <h1>first heading</h1>
        <h2>second heading</h2>
        <p></p>
    </div>
</body>

and here is my css code:

body, div, h1, h2{
    margin:0;
    padding:0;
    }
body{
    width:960px;
    margin:0 auto;
    background:red;
}

#container{
        background:navy;

}
#container h1{
    background:gray;
    width:200px;
    height:200px;
    float:left;

    }
#container h2{
    background:yellow;
    width:200px;
    width:200px;
    float:right;
}
p{
    clear:both;
}

Please any help would be time-savior?

Solution

There is 2x width:200px; style definitions in #container h2. Change it to height and everything will start working :)