Я, как правило, энтузиаст веб-технологий, и я за дизайн без таблиц, но сейчас это меня немного бесит. : /
Я пытаюсь достичь чего-то, что было бы чрезвычайно легко с таблицами, но это кажется слишком сложным / невозможным с использованием плавающих элементов. Посмотрите на следующее:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
+-----------------+
Где #info имеет фиксированную ширину и должен плавать прямо до #contents. #contents должно взять все, что осталось от ширины.
В простой конструкции, в которой присутствуют #contents и #info, это не слишком сложно. Они оба имеют фиксированную ширину, обладают свойством float:left и очень хорошо подходят.
Однако на некоторых страницах #info не будет присутствовать. Очевидно, что в этом случае #contents не масштабируется по размеру всей страницы.
Наиболее очевидным решением было дать #contents без фиксированной ширины, чтобы она масштабировалась, и изменить #info на float:right. После других незначительных изменений, которые требовались, оно не имело точно желаемого поведения, так как оно нарушает макет в виде столбца, когда #contents выше #info:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
| +---------+
| |
+---------------------------+
Что еще хуже, внутри #contents есть другие <div> s с установленным свойством border-bottom, и граница проходит через #info тоже следующим образом:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------|-|-------|
| | +-------+
| +---------+
| |
+---------------------------+
Итак, учитывая все это, как я могу дать #info фиксированную ширину, чтобы он плавал вправо от #contents, но сохранил дизайн в виде столбцов и #contents занимал весь экран когда #info нет, все это гарантирует отсутствие визуальных артефактов и не прибегает к нескольким таблицам стилей?
Это будет желаемый результат на странице, где присутствуют и #contents, и #info:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------| | |
| | +-------+
|-----------------|
| |
+-----------------+
И это желаемый результат на странице, где присутствует только #contents:
+---------------------------+
| #contents |
|---------------------------|
| |
|---------------------------|
| |
+---------------------------+
Надеюсь, это не слишком запутанно. У меня не хватает умственных способностей.