Вход | Регистрация | FAQ
Anonymous

Три колонки на всю ширину

+ Ответить

Сообщений: 8 Страница 1 из 1


Три колонки на всю ширину

mmkana » Вт авг 09, 2011 9:03 pm

Очень хочется сделать три колонки, средняя из них фиксированная по ширине должна располагаться в средине страницы и содержать контент. А в двух других только различный фон. Методам таблиц это делается без проблем. Можно ли сделать это с помощью css?
/* Header */
#container{
width: 100%;
}
#left-container
{
background-color: #99FFFF;
}
#center-container
{
width: 1024 px;
}
#right-container
{
background-color: #000066;
}
/* End Header */
---------------------------------------
<div id="container">
<div id="left-container"> </div>
<div id="center-container"></div>
<div id="left-container"> </div>
</div>
Аватара пользователя

mmkana

  • Сообщения: 4
  • Зарегистрирован: Вт авг 09, 2011 6:04 pm

Re: Три колонки на всю ширину

HTML.net » Чт авг 11, 2011 9:35 am

Может быть, что-то вроде этого:

CSS:

#col1 {
float:left;
}

#content {
margin-left:auto;
margin-right:auto;
width:500px;
}

#col2 {
float:right;
}

HTML:

<div id="col1">Coloumn 1</div>
<div id="col2"><span>Coloumn 2</span></div>
<div id="content">Content</div>


- Andreas, HTML.net
Аватара пользователя

HTML.net
Site Admin

  • Сообщения: 1194
  • Зарегистрирован: Сб сен 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Три колонки на всю ширину

mmkana » Чт авг 11, 2011 9:56 am

Спасибо, но это не решает проблему,т.к. ширина колонок col1 и col2 не определена, то их ширина определяется только текстом в них.
Аватара пользователя

mmkana

  • Сообщения: 4
  • Зарегистрирован: Вт авг 09, 2011 6:04 pm

Re: Три колонки на всю ширину

HTML.net » Чт авг 11, 2011 10:47 am

Она может быть достаточно сложной задачей, чтобы сделать 3 coloumn макета так, как вы хотели бы быть - и работает во всех браузерах. Но Есть много articls об этом - попробуйте Google для "CSS 3 column layout".

Дайте нам знать, если вы найдете решение.

- Andreas, HTML.net
Аватара пользователя

HTML.net
Site Admin

  • Сообщения: 1194
  • Зарегистрирован: Сб сен 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Три колонки на всю ширину

mmkana » Чт авг 11, 2011 4:35 pm

HTML.net писал(а):Она может быть достаточно сложной задачей, чтобы сделать 3 coloumn макета так, как вы хотели бы быть - и работает во всех браузерах. Но Есть много articls об этом - попробуйте Google для "CSS 3 column layout".

Дайте нам знать, если вы найдете решение.

- Andreas, HTML.net

Похоже, что средствами CSS задачу не решить. Я много искал в сети. Пожалуй самый толковый сайт на эту тему http://css-discuss.incutio.com/wiki/Thr ... mn_Layouts Хотя нужного ответа и там нет.
Аватара пользователя

mmkana

  • Сообщения: 4
  • Зарегистрирован: Вт авг 09, 2011 6:04 pm

Re: Три колонки на всю ширину

HTML.net » Чт авг 11, 2011 5:32 pm

Вы просто хотите левый и правый столбцы имеют различные цвета (без содержания)? Тогда я думаю, что вы могли бы сделать это проще с фоновым изображением.

- Andreas, HTML.net
Аватара пользователя

HTML.net
Site Admin

  • Сообщения: 1194
  • Зарегистрирован: Сб сен 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Три колонки на всю ширину

mmkana » Пт авг 12, 2011 12:21 pm

HTML.net писал(а):Вы просто хотите левый и правый столбцы имеют различные цвета (без содержания)? Тогда я думаю, что вы могли бы сделать это проще с фоновым изображением.

- Andreas, HTML.net

Конечно проще. Задача именно не в фоне, а в создании трех колонок, из которых средняя фиксированной ширины, а две другие резиновые.
Аватара пользователя

mmkana

  • Сообщения: 4
  • Зарегистрирован: Вт авг 09, 2011 6:04 pm

Re: Три колонки на всю ширину

HTML.net » Пт авг 12, 2011 12:32 pm

Да, я понимаю. Я уверен, что это может быть сделано, - и я с нетерпением жду, чтобы видеть это. Удачи!

- Andreas, HTML.net
Аватара пользователя

HTML.net
Site Admin

  • Сообщения: 1194
  • Зарегистрирован: Сб сен 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.


+ Ответить

Страница 1 из 1