css внезапная потеря второго противоположного плавающего элемента?

У меня есть этот очень простой код с одним элементом контейнера, а два внутренних элемента h1 и h2 оба плавают в противоположных направлениях. Однако, когда я применяю этот второй элемент, отсутствует событие, хотя я устанавливаю ниже пустой тег абзаца с явным понятием свойства: оба просто должны быть уверены, что родительский сбой не произойдет. Однако, по-видимому, второй элемент отсутствует? Вот мой HTML-код:css внезапная потеря второго противоположного плавающего элемента?

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

и вот мой CSS код:

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; 
}

Пожалуйста, любая помощь будет раз-спаситель?

источник

2014-02-15 Anonymous

Кроме того, для кого я извиняюсь за то, два раза ширина: 200px на #container h2, поэтому я сразу же заменил, что высота: 200px, но до сих пор не делает хотите работать в любом случае? –

О да, моя ошибка. Извините и спасибо ... –

В определении width:200px; указано определение стиля в #container h2. Измените его на height и все начнет работать :)

источник

2014-02-15 16:25:33

Выполнено, но все еще не хочет работать? –

Разве ваше окно браузера более 960 пикселей? Тег вашего тела имеет ширину: 960 пикселей, поэтому, если ваш браузер узкий, он не отображает ваш элемент 'float: right'. –

Вы написали ширину дважды вместо высоты. Пожалуйста, замените его следующим образом.

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

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

Вот скрипку http://jsfiddle.net/s9C6D/

Snap from fiddle