Помогите пожалуйста придумать вёрстку для конфигурации из двух вертикальных колонок. Предположительно через div'ы, но можно и смешанный вариант из таблицы и дивов. Что нужно:
1. Левая колонка (sidebar), ширина фиксированная, но определяется контентом и заранее не известна(т.е. нельзя задать её width).
2. Правая колонка (content), должна занимать всю оставшуюся ширину на странице.
3. Обе колонки должны иметь одинаковую высоту, заранее не известно какая из них будет бОльшей.
4. Колонки должны прилегать друг к другу без зазоров и наложений.
5. Желательная опция: вся конструкция должна занимать минимум всю страницу браузера по высоте.
Имею исходную болванку с двумя дивами:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<style>
body { margin:0; padding:0; height:100%;}
#content { background:#f0f0f0; height:100%; width:100%;}
#sidebar { padding:0; margin:0; float:left; background: #808080; height:100%;}
</style>
<body>
<div id="sidebar"><p>H</p><p>Fe</p><p>G</p></div>
<div id="content"> <p>Content</p> </div>
</body>
</html>
Нагуглил уже много решений похожих проблем (например, тут), но везде размеры колонок заранее заданы в стилях (в процентах или в px/em). Но я не могу так делать и никакое из этих решений не получается проапгрейдить до нужных требований.
