css sudden loss of second opposite floated element?

Question

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?

Also for anyone I apologize for putting two times width:200px on the #container h2, so I immediately replaced that to height:200px but still doesn't want to work anyway? — , Feb 15 '14 at 16:30

score 1 · Accepted Answer · answered Feb 15 '14 at 16:25

1

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

answered Feb 15 '14 at 16:25

Maksim Gladkov

3,051
1
14
16

Is your browser window more than 960px wide? Your body tag has `width: 960px`, so if your browser is narrow, it will not show your `float: right` element. – Maksim Gladkov Feb 15 '14 at 16:29

Shiva Avula · Answer 2 · 2014-02-15T16:39:09.197

1

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

edited Feb 15 '14 at 16:39

answered Feb 15 '14 at 16:29

Shiva Avula

1,836
1
20
29

score 0 · Answer 3 · answered Feb 15 '14 at 16:30

0

maximgladkov was right I think..?

here is what he suggested:

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

answered Feb 15 '14 at 16:30

snowbeluga

11
2

css sudden loss of second opposite floated element?

3 Answers3