css sudden loss of second opposite floated element?

StackOverflow https://stackoverflow.com/questions/21800258

  •  12-10-2022
  •  | 
  •  

Frage

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?

War es hilfreich?

Lösung

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

Andere Tipps

You have written width twice instead of height. Please replace it as following.

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

    }
#container h2{
    background:yellow;
    width:200px;
    height:200px;
    float:right;
}

Here is a fiddle http://jsfiddle.net/s9C6D/

Snap from fiddle

maximgladkov was right I think..?

here is what he suggested:

http://codepen.io/anon/pen/vjefh

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top