3 Div в стороку

[kamaz6141]

Вобщем такая проблема, имеется три div

<div class="news">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
</div>

нужно чтобы они были в одну строку, первый див прижат к левому краю, второй посередине, третий прижат к правому...вот css который я написал

#left{
border:1px solid #000;
overflow:hidden;
float:left;
width:80px;
height:80px;
background:url('../images/left.png') no-repeat left top;
}

#center{
border:1px solid #000;
overflow:hidden;
float:left;
width:auto;
height:80px;
background:url('../images/center.png') repeat-x center top;
}

#right{
border:1px solid #000;
overflow:hidden;
float:right;
width:80px;
height:80px;
background:url('../images/right.png') no-repeat right top;
}

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

или вот как проще обьяснить что вообще нужно:

нужно построить вот такую конструкцию DIV'ами(пронумерованы)

1 2 3 - 1,3 фиксированы ; 2 резиновый по ширине,по высоте фиксирован

4 5 6 - 4,6 фиксированы по ширине и повторяется по высоте; 5 резиновый по ширине, высота(контент)

7 8 9 - 7,9 фиксированы ; 8 резиновый по ширине,по высоте фиксирован

тоесть у меня есть кусочки (фоны) разбитого четырехугольника с закругленными улами , ну а в центре находится контент с белым фоном.

P.s. Если ктото сможет понять что я спрашивал , то подскажите как правильно сделать, заранее спасибо

Edited March 11, 2011 by kamaz6141

[photograf]

http://htmlbook.ru/layout/fiksirovannaya-shirina-tri-kolonki

[kamaz6141]

http://htmlbook.ru/layout/fiksirovannaya-shirina-tri-kolonki

там ширина фиксированная, а мне надо чтобы в середине элемент был резиновый...

[Scrum]

http://forum.htmlbook.ru/index.php?showtopic=25282&hl=

[kamaz6141]

http://forum.htmlbook.ru/index.php?showtopic=25282&hl=

спасибо, приступил к изучению

[sigma77]

P.s. Если ктото сможет понять что я спрашивал , то подскажите как правильно сделать, заранее спасибо

div {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

Не?

[photograf]

Задай ширину боковым, а центральный или не задавай, или укажи min-width

[kamaz6141]

впринципе так и сделал, но правый и левый блок поверх центрального, структура DIV такая должна быть?

<div id="center">
   <div id="left"></div>
   <div id="right"></div>
</div>

[Scrum]

нет, сначала правый потом левый а потом уже контент. Но есть и другие варианты если дочитаете до конц ))

[kamaz6141]

блин...я вообще запутался....вот что получается:

а нужно

и чтобы при изменении обьёма текста корректно менялась высота блока

Edited March 11, 2011 by kamaz6141

[Scrum]

и еще раз )) http://forum.htmlbook.ru/index.php?showtopic=25282&hl=

Там привел пример.

p.s. В вашем случае нет необходимости, судя из макета, использовать флоат, у вас обычный поток.

[Int]

Фон и padding для текста слева и справа. Где уж сложность нашли.

[kamaz6141]

не могу разобраться я по тому примеру(((

мне нужно чтобы отмеченные блоки автоматически дорисовывались до низа, пишу height:auto и они просто исчезают...

вот html

<div class="news">

<div id="ygol1"></div>
<div id="ygol2"></div>
<div id="top"></div>

<div id="left"></div> 
<div id="right"></div>
<div id="center">
CD-визитка — оптический диск, выполняемый в формате визитной карточки (повторяет её размер 90?50 мм).

Предназначен для хранения персональных данных, дополняющих контактную информацию, отпечатанную на лицевой стороне CD-визитки.

Диск визитки предназначен для воспроизведения в компьютерном приводе, его проигрывание обеспечивается расположением в её нижней части выпуклостей, фиксирующих диск в 8-см углублении для mini-DVD и mini-CD-дисков. В отличие от CD-открыток, диск выполнен из более плотного материала и имеет меньший радиус, поэтому существует меньше возможностей его разрыва в компьютерном приводе.

Для вариантов выполненных на базе CD-технологии характерен объём 20 Мб.

Обратная сторона диска допускает нанесение на неё меток и изображений, хотя в центре диска присутствует отверстие.
[править]
Стандарты

Существует несколько стандартов хранения данных на цифровых оптических дисках. В совокупности они называются «Радужными книгами». Они включают в себя «Красную книгу» — стандарт для аудиодисков, «Белую книгу» — стандарт хранения видео данных, «Жёлтую книгу» — стандарт хранения компьютерных данных, а также «Зелёную книгу» — стандарт хранения мультимедийной информации на диске, объединяющий три предыдущих стандарта (см.: CD-i).

</div> 
<div id="ygol3"></div>
<div id="ygol4"></div>
<div id="bottom"></div>
</div>

вот сss

#ygol1{
overflow:hidden;
float:left;
margin-left:30px;
width:80px;
height:80px;
background:url('../images/ygol1.png') no-repeat left top;
}

#ygol2{
overflow:hidden;
float:right;
margin-right:30px;
width:80px;
height:80px;
background:url('../images/ygol2.png') no-repeat right top;
}

#top{
overflow:hidden;
height:80px;
background:url('../images/top.png') repeat-x center top;
}

#left{
overflow:hidden;
float:left;
margin-left:30px;
width:80px;
height:auto;			  
background:url('../images/left.png') repeat-y left top; /*вот левый кусок картинки*/
}

#right{
overflow:hidden;
float:right;
margin-right:30px;
width:80px;
height:auto;  
background:url('../images/right.png') repeat-y right top; /*вот правый кусок картинки*/
}

#center{
overflow:hidden;
height:auto;
background-color:#d7d7d7;
} 

#ygol3{
overflow:hidden;
float:left;
margin-left:30px;
width:80px;
height:80px;
background:url('../images/ygol4.png') repeat-y left bottom;
}

#ygol4{
overflow:hidden;
float:right;
margin-right:30px;
width:80px;
height:80px;
background:url('../images/ygol3.png') repeat-y right bottom;
}

#bottom{
overflow:hidden;
height:80px;
background:url('../images/bottom.png') repeat-x bottom center;
}

как то так...просто не силён во всём этом, убил 3 суток и не могу разобраться как это сделать нормально...

[Int]

Да сделай ты фоном. Тогда три будет не горизонтально, а вертикально. И всё будет растягиваться как тебе нужно.

[kamaz6141]

поподробнее плиз))

[kamaz6141]

UP!

[Int]

<div>Шапка</div>

<div clas="with-background">Тут весь текст</div>

<div>Обувь</div>

[kamaz6141]

спасибо, разобрался, но возникла очередная проблемка...

HTML

<div class="menu">
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
</div>

CSS

.menu{
margin:0 auto;
border:1px solid #fff;
width:100%;
height:85px;
}
.menu ul{
list-style-type:none;
margin:0;
padding:0;
}

.menu li{
width:177px;
height:95px;
float:left;
margin:0 auto;
background:url('../images/button.png');
border:1px solid #fff;
}

как сделать чтобы внутри дива кнопки выравнивались по центру? никак не получается

[Int]

ul {

width:100px;

display:block;

margin:0 auto;

}

как вариант

Не тому объекту выравнивание ставишь.

[kamaz6141]

спасибо, всё выровнялось, но теперь каждая кнопка с новой строки, как быть?

P.S. и ещё в IE выравнивание не работает, всё выравнивается по левому краю

Edited March 14, 2011 by kamaz6141

[Justnewone]

Вот именно поэтому всегда слезно прошу приводить ссылку на проблемный документ в интернете.

Скорее всего, IE6 в Квирксмод, потому не работает margin:0 auto;

вместо флоата в строку можно поставить так

display:inline-block;
* display:inline;
* zoom:1

Ну и UL сказать выравнивание по середине.

[Int]

ul {position:relative}

li {float:left}

Но я могу дико ошибаться, тут проверять надо.

[kamaz6141]

что всё равно всё криво, вот ссылка http://m.omage.ru/ , каждая кнопка с новой строки((

CSS

.menu{
margin:15 55 0 55;
width:100%;
height:85px;
}
.menu ul{
position:relative;
width:100px;
display:block;
margin:0 auto;
list-style-type:none;
}

.menu li{
width:177px;
height:95px;
float:left;
background:url('../images/button.png');
/*border:1px solid #fff;*/
}

.menu li:hover{
background:url('../images/buttonhover.png');
}

.menu li a{
display:block;
padding:13px;
margin-top:2px;
font-size:11px;
text-align:center;
line-height:98%;
}

[xlife]

kamaz6141,

на сайте срабатывает правило для

.menu ul{

width: 100px;

}

Уберите его и меню выровняется горизонтально.

Edited March 15, 2011 by xlife

[kamaz6141]

kamaz6141,

на сайте срабатывает правило для

.menu ul{

width: 100px;

}

Уберите его и меню выровняется горизонтально.

спасибо, помогло, но теперь меню не по центру выравнивается((( то одно то другое, бесит.

[Justnewone]

спасибо, помогло, но теперь меню не по центру выравнивается((( то одно то другое, бесит.

Соедините это сообщение и сообщение от xlife. Я только что в фаеррбаге сделал, все получилось.

Надо будет только добавить вертикальное выравнивание, чтобы элементы меню все поверху встали.

UPD:

Ну и с сылками внутри LI надо поступить точно также.