Плавающий второй элемент справа без указания ширины первого?

(Извинения за заголовок. Проблема намного легче продемонстрировать, чем названная.)

У меня есть два элемента: контейнер содержимого (#content) и контейнер объявлений (#ads). Контейнер содержимого будет размещаться на каждой странице сайта. Объявления будут размещаться на некоторых страницах и иметь фиксированную ширину.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <style type="text/css" media="screen">

        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 800px;
            border: 1px solid blue;
        }

        #ads {
            float: right;
            border: 1px solid lime;
        }

        .ad {
            width: 100px;
            height: 100px;
            background: gray;
        }

        #content {
            overflow: hidden;
            border: 1px solid red;
        }

    </style>

</head>

<body>

    <div id="container">

        <ul id="ads">
            <li class="ad">Buy Coke</li>
            <li class="ad">No, Buy Pepsi!</li>
            <li class="ad">Coke bought more ad space</li>
        </ul>

        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

    </div>

</body>
</html>

(Хорошо, я признаю, что это не мой код, но упрощение контента/рекламы делает мой вопрос намного более простым.)

То, что у меня здесь, в основном является идеальной настройкой, поскольку оно позволяет удалить список #ads, а #content - естественно перепланировать, чтобы заняться своим пространством. Кроме того, я не указал ширину #content в любом месте таблицы стилей. Это обеспечивает дополнительную гибкость: макет можно использовать с контейнером любой ширины.

Но я перфекционист; Я не хочу, чтобы реклама поступала до содержимого в исходном порядке.

Мой вопрос: есть ли способ выполнить этот макет, который удовлетворяет следующим требованиям:

  • #ads следует за #content в источнике
  • Удаление #ads из источника приводит к тому, что #content занимает всю ширину своего родителя (#container) без изменений CSS.
  • Ширина #content явно не записывается в CSS (т.е. Единственное изменение, необходимое для того, чтобы сделать страницу более широкой, - это изменить ширину # контейнера).

ОТВЕТЫ

Ответ 1

если вы не боитесь css3 (в основном это означает, что вам не нужно беспокоиться о том, что это действительно так):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{display:-moz-box; -moz-box-orient:horizontal; width:500px; background:yellow;}
        .content{-moz-box-flex:1; background:red;}
        .ads{background:blue; width:100px;}
    </style>
</head>
<body>
    <p>with ads:</p>
    <div class="container">
        <div class="content">content</div>
        <div class="ads">ads</div>
    </div>
    <p>without ads:</p>
    <div class="container">
        <div class="content">content</div>
    </div>    
</body>
</html>

это только firefox, обязательно примените соответствующие префиксы поставщика (-webkit-, -o-) для других браузеров. чтобы сделать эту работу в том, хотя будет писать javascript.

Ответ 2

требования 1 и 3 противоречат друг другу. если вы хотите, чтобы #ads следовал за #content в источнике и не предоставлял ширину #content, тогда объявления будут отображаться ниже содержимого, а не справа. Поскольку #content не имеет ширины, он будет занимать всю ширину контейнера. Я думаю вам нужно отдать с требованием 1.The путь он сделан теперь совершенно нормально.