как выставить два дива в ряд?

name_Arthur · 30.09.2007, 11:20

подскажите,
как выставить два дива в ряд,
а то они что не делаю друг под
другом получаются
( при это не вставляя один в другой! )

Ragimovich · 30.09.2007, 11:51

не знаю что конкретно нужно, но я решал трабл так.

Задача: сделать без таблиц хедер форума с закруглениями. Дизайн резиновый.

Решение:
1. Юзать библиотеки js не было желания.
Поэтому делал все так.
Определил три стиля:
.header_left{
background: transparent url(images/article_left.png) no-repeat;
height: 32px;
width: 6px;
float: left;
}

.header_right{
background: transparent url(images/article_right.png) no-repeat;
height: 32px;
width: 6px;
float: right;
}
.header_center{
background-image: url(images/article_center.png);
height: 32px;
background-repeat: repeat-x;
margin-left: 6px;
margin-right: 6px;
padding-left: 5px;
}

Да поправят меня гуру, если тут избыток кода. Я как грится не занимаюсь верствкой профессионально.

Далее.
В документе пишем дивы в таком порядке:
<div class="header_left"></div>
<div class="header_right"></div>
<div class="header_center">Тут типа текст</div>

Как я понимаю тут какая-то заморочка именно с флоатами и клеарами. Хотелось бы чтобы подробности объяснил кто-нить из гуру.

czukowski · 30.09.2007, 12:26

name_Arthur, в дримвивере есть шаблоны для большого количества вариантов верстки. Попробуй с них начать, а там разберешься - сам спецом буедшь

Ragimovich · 01.10.2007, 12:08

с дрима начинать? а вы жжоте;-) лучше уж с TopStyle ;-)

lusever · 08.11.2007, 23:48

Код:

<div style="float:left"></div><div style="float:left"></div>

Il_Burbero · 12.11.2007, 10:23

lusever прав, но не до полной кроссбраузерности

Для лучшей кроссбраузерности рекомендуется делать чистку от флоат, если ниже будут какие то дивы еще.
.clearboth {clear: both;} Сделать чистку можно присвоив этот стиль ну допустим разрыву строки: <br class="clearboth" />

Код:

<div class="header_left"></div>
<div class="header_right"></div>
<div class="header_center">Тут типа текст</div>
<br class="clearboth" />
<div class="footer">.....</div>

Есть еще такой тупорылый браузер Internet Explorer или Осел. Ну так вот он не вкуривает иногда как обрабатывать флоат. Поэтому нужно быть очень осторожным с этим свойством и смотреть как оно отображается в Осле.
Лучше еще добавить в ХТМЛ код вида

Код:

<!--[if IE]>
<style type="text/css">
/* css fixes for IE */
.container {display: inline;}
</style>
<![endif]-->

где .container это стиль divа который содержит плавающие элементы которые мы выстраиваем в ряд.

И по собственно теме

Цитата:


	подскажите, как выставить два дива в ряд, а то они что не делаю друг под другом получаются ( при это не вставляя один в другой! )

Решения
1. Отказатся от див и сделать таблицей, меньше геморроя и лучше кроссбраузерность.
2. Сделать жесткий див (CSS type: absolute) с жесткой разметкой. Минусы: потому что жесткий не будет тянутся никогда

. Т.е. контент>границ дива= полоса прокрутки (если нет ограничений в CSS).
3. Вариант резиновый. Это то что здесь обсуждалось. НО! Ничего не будет плавать в воздухе, для того чтобы работал флоат он ОБЯЗАН быть в контейнере. Иначе откуда ему знать относительно чего всплывать и куда? Т.е. дивы не обязаны быть вложенными, но обязаны быть в контейнере.
Кстати <body>........</body> тоже контейнер

13.11.2007, 00:43

GRAf_1x · 07.01.2008, 22:48

может где учебник есть так почитать???

Arakson · 22.01.2008, 02:31

Вот:
Скачать книгу HTML и CSS на примерах [Влад Мержевич]

mff4 · 18.02.2008, 16:30

Очень просто:
<div style="display:inline;"></div>
<div style="display:inline;"></div>

30.09.2007, 11:20	#1
name_Arthur Неактивный пользователь Пол: Регистрация: 19.06.2007 Сообщений: 9 Репутация: 3	как выставить два дива в ряд? подскажите, как выставить два дива в ряд, а то они что не делаю друг под другом получаются ( при это не вставляя один в другой! )

30.09.2007, 11:51	#2
Ragimovich Постоялец Пол: Регистрация: 24.10.2006 Сообщений: 495 Репутация: 418	Ответ: как выставить два дива в ряд? не знаю что конкретно нужно, но я решал трабл так. Задача: сделать без таблиц хедер форума с закруглениями. Дизайн резиновый. Решение: 1. Юзать библиотеки js не было желания. Поэтому делал все так. Определил три стиля: .header_left{ background: transparent url(images/article_left.png) no-repeat; height: 32px; width: 6px; float: left; } .header_right{ background: transparent url(images/article_right.png) no-repeat; height: 32px; width: 6px; float: right; } .header_center{ background-image: url(images/article_center.png); height: 32px; background-repeat: repeat-x; margin-left: 6px; margin-right: 6px; padding-left: 5px; } Да поправят меня гуру, если тут избыток кода. Я как грится не занимаюсь верствкой профессионально. Далее. В документе пишем дивы в таком порядке: <div class="header_left"></div> <div class="header_right"></div> <div class="header_center">Тут типа текст</div> Как я понимаю тут какая-то заморочка именно с флоатами и клеарами. Хотелось бы чтобы подробности объяснил кто-нить из гуру.

30.09.2007, 12:26	#3
czukowski Постоялец Пол: Регистрация: 25.05.2007 Сообщений: 432 Репутация: 169	Ответ: как выставить два дива в ряд? name_Arthur, в дримвивере есть шаблоны для большого количества вариантов верстки. Попробуй с них начать, а там разберешься - сам спецом буедшь

01.10.2007, 12:08	#4
Ragimovich Постоялец Пол: Регистрация: 24.10.2006 Сообщений: 495 Репутация: 418	Ответ: как выставить два дива в ряд? с дрима начинать? а вы жжоте;-) лучше уж с TopStyle ;-)

08.11.2007, 23:48	#5
lusever Неактивный пользователь Регистрация: 08.11.2007 Сообщений: 5 Репутация: 0	Ответ: как выставить два дива в ряд? Код: <div style="float:left"></div><div style="float:left"></div>

13.11.2007, 00:43	#7
VVM85 Guest Сообщений: n/a	Ответ: как выставить два дива в ряд? <div style="float:left">one</div><div>two</div>

07.01.2008, 22:48	#8
GRAf_1x Неактивный пользователь Регистрация: 07.01.2008 Сообщений: 3 Репутация: 0	Ответ: как выставить два дива в ряд? может где учебник есть так почитать???

22.01.2008, 02:31	#9
Arakson Неактивный пользователь Регистрация: 10.10.2007 Сообщений: 5 Репутация: 1	Ответ: как выставить два дива в ряд? Вот: Скачать книгу HTML и CSS на примерах [Влад Мержевич]

18.02.2008, 16:30	#10
mff4 Неактивный пользователь Пол: Регистрация: 18.02.2008 Адрес: web Сообщений: 27 Репутация: 7	Ответ: как выставить два дива в ряд? Очень просто: <div style="display:inline;"></div> <div style="display:inline;"></div>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
как выставить 2 картинки?	Wild_Dream	Школа Photoshop / Photoshop School	5	13.10.2012 11:14
Выставить три дива вертикально(не так просто !)	igorus77	CSS	8	16.03.2009 14:56
где и как в биосе выставить ?Много всего на USB	Ласка	Скорая помощь	20	19.01.2009 02:18
Как выставить пароль... Смотрите внутри	maximus007	Архив	3	04.10.2008 23:55