Создание CSS-правила для работы как с одной, так и с двумя колонками

Question

Вот что я пытаюсь сделать:

Пример http://img689.imageshack.us/img689/5761/cssautowidth.th.jpg ( Увеличенное изображение .)

Когда элемент <nav> присутствует в дизайне, я хочу, чтобы он выглядел как в примере ниже. Возможно ли это сделать, когда для #content div установлено процентное значение? Мне просто любопытно посмотреть, возможно ли это без использования двух разных стилей для #content (оба с разными значениями ширины.)
Кажется, просто плавание не делает этого.

Причина, по которой я хочу, чтобы #content имела процентное значение в первом примере, заключается в том, что у меня есть фоновое изображение в #body, которое создает иллюзию внешнего свечения.

Редактировать : я только что убрал необходимость использования процента ширины, используя вместо этого поля.

Answer 1

Проверьте пример здесь: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm

Что вам нужно сделать, это установить float:right и width для элемента <nav> и оставить #content без каких-либо значений с плавающей запятой или ширины, просто установите поле. Таким образом, контент будет пытаться занять все заданное пространство и не попадет в навигацию.

Затем, если вы скроете элемент <nav>, содержимое будет автоматически изменено (но вам также нужно будет удалить отступ справа).

Это пример кода:

<style type="text/css">
    #container { width:700px; margin:0 auto; border:1px solid #000; }
    #nav  { display:none; }
    .double #nav { width:10%; float:right; display:block; }
    #content { margin-right:10%; border-right:1px solid #000; }
</style>

<div id="container" class="double">
    <div id="nav">nav content</div>
    <div id="content">page content</div>
</div>

Теперь, если вы удалили class="double" из элемента контейнера, вы увидите, что содержимое корректно изменено, чтобы занять 90% от указанного пространства. Если вы хотите получить 100% - просто добавьте .double до стиля #content.