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



 

Здравствуйте, гость (

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

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


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


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

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


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


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


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


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


(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


<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


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


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


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

Ещё посмотри генератор шаблонов на csstemplater.com, пригодится если будешь верстать и под ie6.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как в пушсетках покупают по 100-200 тысяч кликов за день?
2 Boymaster 718 24.4.2024, 17:52
автор: Boymaster
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
151 adw-kupon.ru 19904 23.4.2024, 13:52
автор: Vmir
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
20 uahomka 3482 23.4.2024, 11:54
автор: Skyworker
Горячая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
30 freeax 5047 20.4.2024, 16:49
автор: Liudmila
Открытая тема (нет новых ответов) Арбитражники, как ведете учет расходов и доходов?
13 Boymaster 2039 20.4.2024, 15:06
автор: Boymaster


 



RSS Текстовая версия Сейчас: 26.4.2024, 1:04
Дизайн