X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Как правильно сверстать три колонки
kacer
kacer
Topic Starter сообщение 7.6.2012, 18:06; Ответить: kacer
Сообщение #1


Новичок
*

Группа: User
Сообщений: 42
Регистрация: 21.2.2011
Поблагодарили: 9 раз
Репутация:   1  


Не могу разобраться с css. Есть три дива, надо чтобы они были колонками. Первый 200px был прилеплен к левому краю, третий 200px был прилеплен к правому краю, а центральный занимал все пространство между левым и правым. Я сделал float: left для левого и центрального, и float: right для правого. При таком раскладе центральный прилепился к левому блоку, но появилась пустота до правого, и если в него напихать много элементов в строчку он вытесняет правый вниз. Не ужели придется юзать таблицы?
-3
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
metkram
metkram
сообщение 7.6.2012, 18:24; Ответить: metkram
Сообщение #2


Старожил
******

Группа: Active User
Сообщений: 1123
Регистрация: 15.2.2010
Из: Украина
Поблагодарили: 364 раза
Репутация:   38  


если я правильно понял, то центральному надо прописать строгую ширину и автоматическое центрирование, т.е.

width: ШИРИНАpx;
margin: 0 auto;


--------------------
Купи и эту строчку
Купи и эту строчку
Комплексный прогон сайтов ru и en


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Max_Q
Max_Q
сообщение 7.6.2012, 18:54; Ответить: Max_Q
Сообщение #3


Участник
***

Группа: User
Сообщений: 118
Регистрация: 13.11.2011
Поблагодарили: 46 раз
Репутация:   13  


Можете воспользоваться готовыми инструментами, например: http://xhtml.ru/instr/3col_creator/index.html


Поблагодарили: (3)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kacer
kacer
Topic Starter сообщение 7.6.2012, 20:16; Ответить: kacer
Сообщение #4


Новичок
*

Группа: User
Сообщений: 42
Регистрация: 21.2.2011
Поблагодарили: 9 раз
Репутация:   1  


(metkram @ 7.6.2012, 18:24) *
margin: 0 auto;

Делал так, не получалось. Видимо потому что position:relative; не указал.

(Max_Q @ 7.6.2012, 18:54) *
Можете воспользоваться готовыми инструментами, например: http://xhtml.ru/instr/3col_creator/index.html

Спасибо, то что нужно.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Сергуня
Сергуня
сообщение 8.6.2012, 6:20; Ответить: Сергуня
Сообщение #5


Бывалый
****

Группа: User
Сообщений: 284
Регистрация: 13.4.2008
Из: Подгорица
Поблагодарили: 48 раз
Репутация:   11  


<div>
<div style="float:left; width:200px;">1</div>
<div style="float:left;">2</div>
<div style="float:right; width:200px;">3</div>
</div>


Сообщение отредактировал Сергуня - 8.6.2012, 6:20


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
VorVanill
VorVanill
сообщение 11.6.2012, 16:13; Ответить: VorVanill
Сообщение #6


Частый гость
**

Группа: User
Сообщений: 58
Регистрация: 3.11.2011
Из: Киев, Украина
Поблагодарили: 3 раза
Репутация:   0  


CODE
<div id="container">
<div id="nav">Левая колонка</div>
<div id="aside">Правая колонка</div>
<div id="content">Центральная колонка</div>
</div>

CODE
#container {
width: 900px; /* Ширина макета */
margin: 0 auto; /* Выравнивание по центру */
}
#nav {
width: 200px; /* Ширина левой колонки */
float: left;
}
#aside {
width: 300px; /* Ширина правой колонки */
float: right;
}
#content {
margin: 0 300px 0 200px; /* Отступ на ширину левой и правой колонки*/
}

Это на тот случай, если макет фиксированный


--------------------
С уважением, Илья.
Мои услуги
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kacer
kacer
Topic Starter сообщение 12.6.2012, 16:23; Ответить: kacer
Сообщение #7


Новичок
*

Группа: User
Сообщений: 42
Регистрация: 21.2.2011
Поблагодарили: 9 раз
Репутация:   1  


Проблема уже решена с помощью:
(metkram @ 7.6.2012, 18:24) *
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
BlackWater
BlackWater
сообщение 12.6.2012, 17:15; Ответить: BlackWater
Сообщение #8


Новичок
*

Группа: Viewer
Сообщений: 2
Регистрация: 8.6.2012
Поблагодарили: 0 раз
Репутация:   0  


(kacer @ 12.6.2012, 16:23) *
Проблема уже решена с помощью...

Ещё посмотри генератор шаблонов на csstemplater.com, пригодится если будешь верстать и под ie6.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Маленький кейс как сделать много почтовых ящиков в Gmail
Один аккаунт = много ящиков
14 PostBrigada 858 Сегодня, 15:29
автор: SEOMR
Открытая тема (нет новых ответов) Как мошенники зарабатывают на прямых трансляциях в Instagram
Не ждите порно в инстаграм, его нет
12 PostBrigada 1359 16.12.2017, 23:00
автор: PostBrigada
Открытая тема (нет новых ответов) Как сейчас зарегистрировать Яндекс кошелек за пределами России?
4 metvekot 415 16.12.2017, 19:04
автор: metvekot
Открытая тема (нет новых ответов) Как поднять доверие к сайту?
5 fair_exchange 410 16.12.2017, 18:33
автор: genjnat
Горячая тема (нет новых ответов) Черный список обменников и как безопасно обменять валюту
141 Kurses 29976 15.12.2017, 13:04
автор: BestExchangers


 



RSS Текстовая версия Сейчас: 18.12.2017, 15:33
Дизайн