CSS - 1. Заголовок не масштабируется 2. Плавающий текст не совпадает с базовой линией

Question

На этой скрипке , вы можете увидеть строку заголовка с заголовком слева и небольшим текстом справа.Проблема должна быть очевидной:

1. панель заголовка не масштабируется с полным сайтом, только с видимой частью
2. Текст с плавающей точкой справа придерживается верхней части заголовкаи не совпадает с заголовком.

Как это исправить?Есть ли лучший способ добиться того, что я хочу сделать?

Уточнение : Под "заголовком не масштабируется" я имею в виду, что он не имеет ширину 750px, как определено в #header потому что страница слишком мала.

Answer 1

Несколько вещей:

• Нет необходимости в элементе с плавающей запятой.Просто добавьте overflow: auto; к контейнеру.
• Используйте max-width вместо width, поскольку он хорошо масштабируется.

Попробуйте это: http://jsfiddle.net/PkkU8/7/

Answer 2

Для 1) Как уже упоминал Blender, установка max-width: 750px должна дать вам гибкую ширину заголовка, которую вы ищете.Таким образом, ваш заголовок никогда не будет больше, чем 750px, но может уменьшиться, если окно станет меньше этого размера.

Для 2) Если вы не против, вы можете вместо этого расположить правильный блокплавать это.Вы будете менее склонны к проблемам, которые могут возникнуть с плавающей точкой, особенно если вы можете гарантировать, что нужный блок будет меньше самого заголовка:

.fr {
  position: absolute;
  bottom: 0;
  right: 0;
}

Это также требует, чтобы его родительский div был расположен либоабсолютно или относительно правильно работать:

#head {
  position: relative;
}

Answer 3

добавить дополнение к классу fr

.fr {
float: right;
padding: 9px 60px 0 0;
}