Re[2]: двух колоночная разметка: фон sidebar до самого футера - Веб программирование

Здравствуйте!
Никак не могу победить проблему. Может быть, кто-то знает решение?

Суть:
Есть двух колоночная разметка страницы, состоящая из классических блоков div: #header, #content, #sidebar и #footer.
#sidebar — справа.

Для лучшей поисковой оптимизации порядок следования блоков в html следующий:

#header
#content
#sidebar
#footer

Разметка div на одном уровне выполняется с помощью float. Таблицы не используются.

Необходимо, чтобы #sidebar имел фон (background) во всю страницу до самого #footer, но не пересекал его границы.
При этом содержимое #content может быть выше содержимого #sidebar.

Для решения задачи использую дополнительный блок div — #middle, а также css background-image.
Вот схематичный код html:

<div id="header">...</div>
<div id="middle">
    <div id="content">...</div>
    <div id="sidebar">...</div>
</div>
<div id="footer">...</div>

Вот ключевые моменты кода css:

#content{
   float: left;
   width: 650px;
}
#sidebar{
   float: right;
   width: 300px;
}
#footer{
   clear: both;
}
#middle{
   background: url(images/bg.gif) repeat-y right top;
   border: 1px solid red;
}

Вроде всё должно работать, как надо, но не работает.
Дело в том, что блок #middle почему-то сжимается в линию (это можно увидеть, благодаря border). В итоге #content и #sidebar располагаются под ним, а должны располагаться в нём.

Можно ли как-то решить эту проблему, не отказываясь от float и порядка следования блоков в html?

S>Вроде всё должно работать, как надо, но не работает.
S>Дело в том, что блок #middle почему-то сжимается в линию (это можно увидеть, благодаря border). В итоге #content и #sidebar располагаются под ним, а должны располагаться в нём.

Размер миддла считается по контенту, а у тебя контента нет, только плаваюшие блоки. Надо сделать один блок неплавающим. Да и вообще, сверстай на таблицах и не мучай себя.

Здравствуйте, Аноним, Вы писали:

А>Размер миддла считается по контенту, а у тебя контента нет, только плаваюшие блоки. Надо сделать один блок неплавающим. Да и вообще, сверстай на таблицах и не мучай себя.

Т.е. получается, что плавающие блоки не имеют высоты с точки зрения родителей?
Блин, чтобы сделать один блок не плавающим нужно менять порядок следования блоков, а это делать не хочется.
На таблицах уже сделано. Всё это и затеял, чтобы отказаться от таблиц. Хочу избавиться от лишнего html кода, без таблиц всё гораздо компактнее получается.

Здравствуйте, Аноним, Вы писали:

А>Размер миддла считается по контенту, а у тебя контента нет, только плаваюшие блоки. Надо сделать один блок неплавающим. Да и вообще, сверстай на таблицах и не мучай себя.

Спасибо! Ваш ответ выявил новый неизвестный мне факт о float и задал правильное направление поиска решения.
Вот нашёл варианты решения: http://dotnetways.com/articles/float/float3.html
Проверено, работают.

Все очень просто: один блок — float, второй нормальный. Для понимания того, что происходит, нужно разобраться с контекстами форматирования и с тем, что такое нормальный поток (normal flow).
Пример на HTML5 (CSS вполне пригоден и для HTML4 и старых браузеров).

<!DOCTYPE html>
<html>
<head>
    <title>Two Column Layout</title>
    <style type="text/css">
        article {
            display: block;
            float: left;
            width: 600px;
            height: 200px;
            background-color: rgb(255,200,200);
        }
        #read-more {
            display: block;
            height: 400px;
            margin: 0 0 0 610px; 
            background-color: rgb(200,255,200);
        }
        #related-articles { margin: 0; } 
        footer {
            clear: both;
            background-color: rgb(200,200,255);
        }
    </style>
</head>
<body>
    <header>Two Column Layout</header>
    <article>
        <h1>Short content</h1>
        <p>One sentence is enough.</p>
    </article>
    <nav id="read-more">
        <a href="#">Russian Bears Invade the Egypt</a><br />
        <a href="#">Kid From Maryland Discovered New Particle</a><br />
        <a href="#">Sasha Grey is Former KGB Agent</a><br />
        <a href="#">No More Peanuts Says Ukrainian Mogul</a><br />
    </nav>
    <footer>This example is licensed to public domain</footer>
</body>
</html>

А>Да и вообще, сверстай на таблицах и не мучай себя.
На таблицах в 2013 году верстают только чайники и ретрограды. Это непрофессионально и свидетельствует о низкой квалификации верстальщика.

Здравствуйте, Baudolino, Вы писали:

А>>Да и вообще, сверстай на таблицах и не мучай себя.
B>На таблицах в 2013 году верстают только чайники и ретрограды. Это непрофессионально и свидетельствует о низкой квалификации верстальщика.

Не используют таблицы для вертски только снобы и ретрограды. Это глупо и свидетельствует о зависимости верстальщика от чужого мнения.

S>На таблицах уже сделано. Всё это и затеял, чтобы отказаться от таблиц.

Не знала баба горя, купила баба порося

Здравствуйте, Аноним, Вы писали:

А>Не используют таблицы для вертски только снобы и ретрограды. Это глупо и свидетельствует о зависимости верстальщика от чужого мнения.
Сударь, вы не знаете, видимо, значения слова ретроград.

Загляните чтоль в словарь...

Здравствуйте, Baudolino, Вы писали:

B>Здравствуйте, Аноним, Вы писали:

А>>Не используют таблицы для вертски только снобы и ретрограды. Это глупо и свидетельствует о зависимости верстальщика от чужого мнения.
B>Сударь, вы не знаете, видимо, значения слова ретроград.

Загляните чтоль в словарь...

По остальному возражений нет?

Здравствуйте, Baudolino, Вы писали:

B>Все очень просто: один блок — float, второй нормальный. Для понимания того, что происходит, нужно разобраться с контекстами форматирования и с тем, что такое нормальный поток (normal flow).
B>Пример на HTML5 (CSS вполне пригоден и для HTML4 и старых браузеров).

Ах, как мне нравятся такие все из себя крутые верстальщики, любящие всех поучать и синтетические примеры

B>

B>        <h1>Short content</h1>
B>        <p>One sentence is enough.</p>
B>

Действительно, enough. Ведь если не дай бог вбить сюда контент, то внезапно окажется, что все идет по бороде.

Нормального решения на CSS для того, что хочет топик-стартер не существует благодаря уродам из w3c, которые заняты интеллектуальными игрищами вместо того, чтобы делать что-либо практическое.

Здравствуйте, Mamut, Вы писали:
M>Нормального решения на CSS для того, что хочет топик-стартер не существует благодаря уродам из w3c, которые заняты интеллектуальными игрищами вместо того, чтобы делать что-либо практическое.
Я согласен, что мой пример несовершенен. Ваши предложения?

Здравствуйте, Аноним, Вы писали:
А>По остальному возражений нет?

По остальному не возражения, а соболезнования.

Здравствуйте, sergmann, Вы писали:

S>Здравствуйте!
S>Никак не могу победить проблему. Может быть, кто-то знает решение?

Эта проблема имеет имя собственное "Holy Grail Layout"
Написано тонны статей на эту тему всяко разными креативами.

На самом деле все это делается примерно так:

<!DOCTYPE html>
<html>
<head>
    <title>Two Column Layout</title>
    <style type="text/css">
        article {
            display: table-cell;
            width: 100%;
            background-color: rgb(255,200,200);
        }
        nav {
            display: table-cell;
            min-width: 200px;
            margin: 0 0 0 610px; 
            background-color: rgb(200,255,200);
        }
        nav > a { display:block; }
        header, footer {
            background-color: rgb(200,200,255);
        }
    </style>
</head>
<body>
    <header>Two Column Layout</header>
    <nav>
        <a href="#">Russian Bears Invade the Egypt</a>
        <a href="#">Kid From Maryland Discovered New Particle</a>
        <a href="#">Sasha Grey is Former KGB Agent</a>
        <a href="#">No More Peanuts Says Ukrainian Mogul</a>
    </nav>
    <article>
        <h1>Short content</h1>
        <p>One sentence is enough.</p>
    </article>
    <footer>This example is licensed to public domain</footer>
</body>
</html>

Т.е. все те же tables только без <table>.

M>>Нормального решения на CSS для того, что хочет топик-стартер не существует благодаря уродам из w3c, которые заняты интеллектуальными игрищами вместо того, чтобы делать что-либо практическое.
B>Я согласен, что мой пример несовершенен. Ваши предложения?

На таблицах в 2013 году верстают только чайники и ретрограды. Это непрофессионально и свидетельствует о низкой квалификации верстальщика.

Все очень просто: один блок — float, второй нормальный. Для понимания того, что происходит, нужно разобраться с контекстами форматирования и с тем, что такое нормальный поток (normal flow).

Ты же, вроде, должен что-то предложить

CS>Т.е. все те же tables только без <table>.

Напоминает православный пост и воздержание, при котором православные активно обмениваются рецептами, позволяющими приготовить блюда почти того же вкуса, но без использования запрещённых продуктов. Потом очень гордятся тем, как им удалось перехитрить бога.

Здравствуйте, Аноним, Вы писали:

А>Напоминает православный пост и воздержание, при котором православные активно обмениваются рецептами, позволяющими приготовить блюда почти того же вкуса, но без использования запрещённых продуктов. Потом очень гордятся тем, как им удалось перехитрить бога.

Гюльчатай, открой личико, а? Сказать чо хочу...

Здравствуйте, Аноним, Вы писали:
А>Ты же, вроде, должен что-то предложить

Я никому ничего не должен. Мое решение вполне реально поправить (и без table-cell, если что). Слабо? Или будем продолжать ныть про таблицы в век, когда космические корабли бороздят просторы большого театра?

B>Я никому ничего не должен. Мое решение вполне реально поправить (и без table-cell, если что). Или будем продолжать ныть про таблицы в век, когда космические корабли бороздят просторы большого театра?

На кораблях, между прочим, жопу вытирают обычной туалетной бумагой и не пытаются изобрести нано-вытиратель жопы только для того, чтобы соответстовать представлениям снобов о передовых технологиях. Вся космические технологии настолько сложны, насколько это требуется и ни чуть несложнее, потому что повышенная сложность ведет к повышенной вероятности отказа.

B>Слабо?

Ну вот примерно так я вас и представляю, верстаете ни для клиента, ни для ускорения разработки, ни для упрощения решения и последующей поддержки, а исключительно ради понтов друг перед другом.

	От:	sergmann
	Дата:	16.05.13 05:55
	Оценка:

	От:	Аноним
	Дата:	16.05.13 06:41
	Оценка:	3 (1) +1 -1

	От:	sergmann
	Дата:	16.05.13 07:03
	Оценка:

	От:	sergmann
	Дата:	16.05.13 07:54
	Оценка:

	От:	Baudolino
	Дата:	16.05.13 08:11
	Оценка:	5 (1) -1

От:	Mamut	http://dmitriid.com
Дата:	16.05.13 21:04
Оценка:	10 (1) +1

От:	c-smile	http://terrainformatica.com
Дата:	18.05.13 05:53
Оценка:	+1