Хорошо, во-первых, чистый способ CSS. Вы можете получить вертикальное выравнивание по дну, используя относительное + абсолютное позиционирование , например:
<div id="header">
<div id="left">BIG</div>
<div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>
У вас могут быть некоторые проблемы с этим, такие как поведение IE6, а также проблемы z-index с такими вещами, как меню (в последний раз, когда я пытался это сделать, мои меню отображались в абсолютном содержании).
Кроме того, в зависимости от того, должны ли все элементы быть абсолютно позиционированы или нет, вам может потребоваться начать делать такие вещи, как явное указание высоты содержащего элемента, что обычно нежелательно. В идеале вы хотели бы, чтобы контейнер автоматически изменял размер для своих дочерних элементов.
Проблема в том, что базовые линии шрифтов разных размеров не совпадают, и я не знаю "чистого" CSS-способа сделать это.
С таблицами, однако, решение тривиально :
<table id="header">
<tr>
<td id="left">BIG</td>
<td id="right">SMALL</td>
</tr>
</table>
<style type="text/css">
#header { width: 100%; }
#header td { vertical-align: baseline; }
#left { font-size: 40px; }
#right { text-align: right; }
</style>
Попробуйте, и вы увидите, что он отлично работает.
Толпа противников столов будет кричать «синее убийство», но вышесказанное - самый простой и наиболее совместимый с браузером способ (особенно если требуется поддержка IE6) сделать это.
Да, и всегда предпочитайте использовать классы для вставки стилей CSS.