0

Правильно ли я позиционирую 3 дива на странице? Левый,например, содержит рекламу, правый - новости, а тот, что посередине - сам контент. В средний див не удается поместить блок с фиксированной шириной, почему-то. Он появляется в самом низу, там где футер.

#leftBar{
    height:600px;
    width: 170px;
    float:left;
    }  
#rightBar {
    height:600px;
    width:200px;
    float:right;
}
#centerBar {
    text-align:center;
    height:600px;
}

    <body>
    <div id='#leftBar'>...</div>
    <div id='#rightBar'>...</div>
    <div id='#centerBar'>
      <div style='width:300px'>
       .......контент.....
      </div>
    </div>
    </body>

...контент убежал вниз...

6
  • мб display: inline-block?
    – lampa
    8 янв 2013 в 0:19
  • Не поверите, это мысли через расстояние. 2 минуты назад попробовал также - и такой же пришел ответ!!
    – Deus
    8 янв 2013 в 0:21
  • Я не силен в дизайне. Вот еще вопросик - на сайтах обычно body залито background-color, а вот сверху часто есть такое себе градиентное осветление. Каким образом так можно сделать?
    – Deus
    8 янв 2013 в 0:23
  • @Deus, Чтобы отформатировать код, выделите его мышью и нажмите на кнопку {} редактора.
    – Rules
    8 янв 2013 в 5:47
  • Мне кажется что в браузер не умещается 170+200+ширина_контента либо попробуйте #centerBar{width: auto;}
    – Rules
    8 янв 2013 в 5:54

5 ответов 5

1

background:url('some.png') top center no-repeat #fdfdfd; при этом изображение в формате png с прозрачным фоном по краям со свечение нужного цвета. Использовать всякие костыли типа создание градиента через css стили или JS крайне не советую, придётся много писать хаков для браузеров, тогда как атрибуты background: работают практически одинаково во всех браузерах.

1

Вот, взгляните:

html

<div id="leftBar">leftBar</div>
<div id="rightBar">rightBar</div>
<div id="centerBar">
   <div style='width:300px'>
   .......контент.....
   </div>
</div>

css

* { margin: 0; padding: 0; }
body, html {
  width: 100%;
  height: 100%;
}

#leftBar, #rightBar, #centerBar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -0-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#leftBar{
    height:600px;
    width: 170px;
    background: red;
  float: left;
    }  
#rightBar {
    height:600px;
    width:200px;
  background: green;
  float: right;
}
#centerBar {
  height:600px;
  background: blue; 
  padding: 0 200px 0 170px;
}

А вот живой пример - http://jsfiddle.net/87Lcm/2/

Если вдруг возникнут вопросы, - спрашивайте.

Удачи

P.s.

Я не силен в дизайне. Вот еще вопросик - на сайтах обычно body залито background-color, а вот сверху часто есть такое себе градиентное осветление. Каким образом так можно сделать?

Вот, взгяните - http://jsfiddle.net/Alex83/gb9Uy/

Более подробно - здесь

1
  • Да, но у вас также сам контент находится в футере!
    – Deus
    8 янв 2013 в 13:52
1
#centerBar {
  height:600px;
  background: blue; 
  padding: 0 200px 0 170px;
}

а сюда закиньте какой-нибудь элемент со свойством clear:both и у вас все упадет :) я бы абсолюты использовал

2
  • @Александр Лукин, Чтобы отформатировать код, выделите его мышью и нажмите на кнопку {} редактора.
    – Deleted
    8 янв 2013 в 13:43
  • Да , все дело было в padding: 0 200px 0 170px;. Я слишком долго не брал это на учет. Какие-то костыли придумывал. Спасибо.
    – Deus
    16 янв 2013 в 21:55
0

Всем спасибо. Проблему быстро и лаконично решило правило #centerBar {display:inline-block}

-1

если флоаты пользуете то сделайте див класс клеар html: <div class="clear"></div> css: .clear {clear:both;}

3
  • @kuroch, в данном случае блок с clear: both; не нужен. А вообще, если использовать указанный Вами подход грамотно, и там где он действительно нужен, то лучше это сделать с помощью псевдоэлемента :before, а не засорять разметку лишними дивами.
    – Astor
    8 янв 2013 в 8:20
  • А можно подробней про :before, как его использовать в качестве блока с блок с clear: both; ?
    – KerLeada
    8 янв 2013 в 8:51
  • 1
    @KerLeada, вот Вам пример - jsfiddle.net/Alex83/7r4Pp/1 Предложено два варианта, в зависимости от ситуации. 1. задаем родительскому блоку overflow: hidden; - данный вариант хорош, когда блоку не нужно указывать высоту, иначе, если ее(высоту) указать, то все, что не поместится в блок, - будет обрезано. 2. Второй вариант безопасен. Используем псевдоэлемент :after, единственное, о чем стоит упомянуть, данный вариант не будет работать в IE6-7, но это решаемо, о том как, читаем здесь - xiper.net/collect/html-and-css-tricks/glyuki-brauzerov/IE/…. Удачи
    – Astor
    8 янв 2013 в 9:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.