`высота: auto` не работает, чтобы автоматически изменять размер заголовка

Question

Я пытаюсь сделать простую вещь в CSS

У меня есть header тег и внутри, что несколько h тегов. Итак, для того, чтобы иметь адаптивный дизайн я

height:auto;

header внутри тега, поэтому он будет автоматически растягиваться, чтобы содержать h тегов. Правильно?

Но не работает, header - это всего лишь строка в верхней части страницы. Он должен растягиваться, чтобы содержать заголовки, не так ли?

Что мне не хватает?

Неправильно ли использовать CSS в тегах h, а не в стиле header? Итак, h теги будут выглядеть как header в глазах пользователя?

Спасибо advence

Проверить это here

UPDATE Спасибо всем за ansers. Я думал, что GluePear решит проблему, поэтому я редактирую свой код. Но ничего не случилось. У реального файла у меня есть 2 h теги внутри header. И затем body, и некоторое погружение внутри body. По какой-то причине это не работает. Заголовок расширяется на всю страницу!

Проверить this из

Как я могу это исправить?

Еще раз спасибо

Answer 1

Если добавить overflow:auto в CSS заголовка он будет работать.

Кроме того, необходимо закрыть <header> тег:

http://jsfiddle.net/pvVxx/

Answer 2

Вам нужно очистить после использования поплавков Вот обновленный пример: http://jsfiddle.net/Fuw6x/28/clear: both;

Читайте на понятном здесь: http://www.w3schools.com/cssref/pr_class_clear.asp

Answer 3

Я поставил ответ, чтобы сократить проблему: используя поплавок «убивает» любую оценку высоты, как-то - это лучшее объяснение, которое я нашел (да вот на стеке) http://css-tricks.com/all-about-floats/