Резина + две фиксированные одна под другой, проблема?

2001photo · January 29, 2012

Проблема, как сохранив (важно!) данный порядок блоков сделать так, чтобы сайдбар прижался вверх к меню. Сейчас он начинается под контентом.

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Слева резиновая, справа фиксированные колонки</title>
  <style type="text/css">
   body {
    color: #000; /* цвет текста страницы */
    background: #fff; /* фоновый цвет */
    margin: 0; /* убираем поля по краям */
   }
   #header {
    height: 100px; /* высота шапки */
    background: #fc0; /* фон */
   }

   #menu {
    width: 250px; /* ширина меню */
    background: #0fc;
    float: right; /* всплывает вправо */
   }
   #content {
    background: #eee;
    margin-right: 260px; /* размер поля справа */
   }
   #sidebar {
    width: 250px; /* ширина сайдбара */
    background: #c0f;
    float: right; /* всплытие вправо */
   }
   #footer {
    height: 50px;
    color: #fff;
    background: #000;
    clear: both; /* убираем обтекание */
   }
  </style>
 </head>
 <body>
<div id="header">Шапка</div>

 <div id="menu">
   <p>Меню</p>
   <p>Меню</p>
   <p>Меню</p>
 </div>

<div id="content">
<p> Контент </p>
<p>Контент </p>
<p>Контент </p>
<p>Контент </p>
<p>Контент </p>
<p>Контент </p>
</div>

<div id="sidebar">
   <p>Сайдбар</p>
   <p>Сайдбар</p>
   <p>Сайдбар</p>
</div>

   <div id="footer">Футер</div>
</body>
</html>

bob_24 · January 29, 2012

Высоту ведь ты точную не будешь задавать, например для menu? Если сохранить такую разметку, то думаю ни как не сделать. float грубо говорят ограничивается по горизонтали блоком-родителем (у тебя это body), а по вертикали строкой в которой находится. Вот после content, так сказать, начинается новая строка и float выше нее не поднимется сам по себе.

Edited January 29, 2012 by bob_24

DStereo · January 29, 2012

Разве что использовать абсолютное позиционирование и фиксированную высоту для сайдбара и блока меню.

2001photo · January 29, 2012

Высоту ведь ты точную не будешь задавать, например для menu? Если сохранить такую разметку, то думаю ни как не сделать. float грубо говорят ограничивается по горизонтали блоком-родителем (у тебя это body), а по вертикали строкой в которой находится. Вот после content, так сказать, начинается новая строка и float выше нее не поднимется сам по себе.

Спасибо, Боб. У меня как-то всё получилось, но в другой (рабочей) раскладке. Там уже много мусора в стилях, а чистить ее нет времени, поэтому не покажу. Рабочая раскладка отличается тем, что есть враппер для контента и боковых меню. Результат там был тот же что и для этой сетки. Вылечился тем, что для нижнего правого блока после float:right был сделан clear:right и всё встало на место. Однако на этой сетке это не сработало.

Разве что использовать абсолютное позиционирование и фиксированную высоту для сайдбара и блока меню.

Фиксированного меню как раз и хотелось избежать, ибо аккордеон.

DStereo · January 29, 2012

Я так понял, что вам важно чтобы контент оставался как можно ближе к верху страницы, так как это полезно для сео? Если это так, то есть варианты, как можно сделать чтобы контент был вверху, а все остальные части отсавались по бокам. Вот здесь очень много примеров как можно разместить блоки.

2001photo · January 29, 2012

Я так понял, что вам важно чтобы контент оставался как можно ближе к верху страницы, так как это полезно для сео? Если это так, то есть варианты, как можно сделать чтобы контент был вверху, а все остальные части отсавались по бокам. Вот здесь очень много примеров как можно разместить блоки.

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

Я так понял, что вам важно чтобы контент оставался как можно ближе к верху страницы, так как это полезно для сео? Если это так, то есть варианты, как можно сделать чтобы контент был вверху, а все остальные части отсавались по бокам. Вот здесь очень много примеров как можно разместить блоки.
Нет, причина данного потока не в этом. Сетка делается под mediaqueries и хотел для небольших экранов поставить меню выше контента а виджеты под контент, просто восстановив поток блоков.
Варианты с последовательным размещением боковых блоков работают запросто, мне захотелось их разделить контентом )

Sign In

Резина + две фиксированные одна под другой, проблема?

Question

2001photo

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

bob_24

Link to comment

Share on other sites

DStereo

Link to comment

Share on other sites

2001photo

Link to comment

Share on other sites

DStereo

Link to comment

Share on other sites

2001photo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information