Если сделать конструкцию из двух дивов, идущих подряд друг за другом, то второй обязательно съезжает под первый. как при помощи css расположить два дива горизонтально? При этом нужно, чтобы они не наезжали друг на друга при изменении размеров окна браузера.

например, расположить два span'а — это строчный элемент.
например, задать свойство display:inline.
например, воспользоваться плавающей моделью — float:left.
например...

спаны и дисплей:инлайн -- строчные элементы, в которые другие блоки класть -- вилы.
вопрос поставлен о див-ах.

или float:left обоим (не все так просто)
или position:absolute, одному left:0;width:50%, другому right:0;width:50% (если речь идет о резине). Обоим top: -- по ситуации и/или макету. Высота при этом -- тема отдельного разговора.
если они вложены в другой див, то парентовому диву нужно объявить position:relative и width. Высота при этом -- также тема отдельного разговора.

xpoint.ru
alistapart.com
для ленивых: http://www.thenoodleincident.com/tutori … boxes.html

karamba, какой вопрос — такой ответ

karamba, float:left обоим? Просто, но некашерно имхо.

Остальное-то понятно...

DimaZzz, ты в следующий раз в этих горних высях конкретнее вопрос задавай, например, нужны ли будут потом вложеные блоки, нужно ли выравнивание по высоте, будет ли что-то над и под ними и пр... А то наотвечают...

Ртфм

Спасибо. Достаточно оказалось просто добавить в стили обоих дивов float:left;
Объясните пожалуйста еще, что значит это таинственное "float"?

В переводе с английского оно значит "вещественный". Какое значение оно имеет в CSS?

А еще при уменьшении размеров браузера второй див все равно перескакивает вниз под первый. От этого вообще можно избавиться, не используя таблицы?

DimaZzz, с английским у тебя не очень, а значит оно именно то, что написано в спецификации CSS. Советую почитать на досуге.

Abstract писал(а):

DimaZzz, с английским у тебя не очень, а значит оно именно то, что написано в спецификации CSS. Советую почитать на досуге.

По одному слову судить о моем английском не стоит Это связано с тем, что в C++ тип данных float отвечает за хранение вещественных чисел с плавающей точкой. Мне почему-то всегда казалось, что здесь подразумевается перевод. Видимо я ошибался.

float — покачивание на поверхности воды, удерживание на плаву и т. д.
float в cpp — данные с плавающей точкой.
float в css — плавающая модель.

DimaZzz, http://www.w3.org/TR/CSS21/visuren.html#q27

Вещественный = real

Abstract писал(а):

karamba, float:left обоим? Просто, но некашерно имхо.

если с умом -- то кошерно. Или мы расходимся в понимании термина "кошерно" )

DimaZzz писал(а):

А еще при уменьшении размеров браузера второй див все равно перескакивает вниз под первый. От этого вообще можно избавиться, не используя таблицы?

я это и имел в виду, когда говорил "не все так просто".
А ваще можно. Ключевые слова: "отрицательный маргин", или "margin-left: -..%"
А еще по-хорошему нужен min-width и его брат-калека (папой был ИЕ) width:expression() =) если хотите чтоб совсем не срывало. Ну или overflow:hidden на худой простите конец =)))

чтобы один из блоков не падал под другой максимально долго, нужно чтобы их суммарная ширина была меньше 100%, например, 98%.

karamba, да не... Примерно одно понимаем, просто имхо то прикладывание ума несколько затейливее, чем хотелось бы.

На самом деле там и отрцательные маргины не нужны...

Кстати, а собственно, мы таки не услышали, условия-то какие? Они одинаковые должны быть по ширине, разные? Фиксироанные, резиновые или один резиновый, другой нет? Собсна, от этого много чего зависит. В смысле конкретики реализации.

1NV1Z0R писал(а):

Вещественный = real

Знаю.
В Pascal так оно и есть. А в C++ - float

Abstract писал(а):

Кстати, а собственно, мы таки не услышали, условия-то какие? Они одинаковые должны быть по ширине, разные? Фиксироанные, резиновые или один резиновый, другой нет? Собсна, от этого много чего зависит. В смысле конкретики реализации.

Ширина их желательно должна зависеть от контента. А в случае, если суммарная ширина их контента превысит ширину окна документа, то должна появиться горизонтальная полоса прокрутки.

Abstract писал(а):

DimaZzz, http://www.w3.org/TR/CSS21/visuren.html#q27

Спасибо за ссылку.

.talisman писал(а):

чтобы один из блоков не падал под другой максимально долго, нужно чтобы их суммарная ширина была меньше 100%, например, 98%.

А Opera 7.какая-то там вообще не понимает понятие ширины в %. Насчет 8 не знаю.

karamba писал(а):

А ваще можно. Ключевые слова: "отрицательный маргин", или "margin-left: -..%" А еще по-хорошему нужен min-width и его брат-калека (папой был ИЕ) width:expression() =) если хотите чтоб совсем не срывало. Ну или overflow:hidden на худой простите конец =)))

А что дает отрицательный margin? Он что позволяет наезжать одному объекту на другой? Каков его смысл?
min-width и его братишка width:epression по-моему не понимаются Opera. По крайней мере min-width - то точно. И width:auto;.

DimaZzz, понятие ширины в % понимают все, только каждый по-своему. А если контейнеру еще паддинги боковые задать или бордеры, так ваще изысканный кекс получается )), т.е. в лоб паддинги лучше не ставить: каркасные контейнеры -- отдельно, отступы -- отдельно. Или использовать цсс-хаки.
.talisman, да, и это тоже, т.е. один может иметь 50%, второй 49.9%, только это не 100%-ный фикс ))

karamba, а я и не говорю, что 100% =)
если 50 и 50, то упадут практически сразу, а так немного подольше проживет конструкция =)

DimaZzz писал(а):

А что дает отрицательный margin? Он что позволяет наезжать одному объекту на другой? Каков его смысл? min-width и его братишка width:epression по-моему не понимаются Opera. По крайней мере min-width - то точно. И width:auto;.

при неправльном использовании отрицательный маргин таки-да, играет не за ту комманду ) При правильном -- фиксит известную проблему ИЕ срыва блоков, только при %-ой ширине блоков он тоже должен быть %-ым.
Опера -- как раз наоборот, width:expression понимает ТОЛЬКО ИЕ, остальным достаточно min-width-а. Вы бы сначала поэскпериментировали, чтобы не использовать выражение "по-моему" )
"Опыт -- сын ошибок трудных".
Одно могу сказать: цсс получится избыточным, зато кроссброузерным, но единственный expression сделает его еще и не валидным. Или пока не до этого? ))

.talisman писал(а):

если 50 и 50, то упадут практически сразу, а так немного подольше проживет конструкция =)

кроме того, при сумме ширин блоков = 100% в ИЕ имеем появаляющийся при ресайзе никомуненужный гориз.скролл, и ширина с десятыми процента эту проблему фиксит железно.

не сочтите провокатором, отрицательным должен быть маргин-райт ))
маргин-лефт положительным