Доброе время суток.



Вопрос; как с помощью CSS поставить два дива в центральной части страницы, один рядом сдругим, и чтобы между ними было расстояние скажем в 20 px. ?

как-то так

Если я вас правильно понял, то вам надо два блока по середине экрана не зависимо от разрешения. Если это так, то вот вам пример.

Оба примера рабочии...  
Результат у обоих примеров один и тотже.
Какой из вышеприведенных примеров предподчтительнее..??
Пример ayax2005-а, на мой взгляд проще.
Спасибо

Проще и к тому же не работает в ИЕ 7 и 6.

FightInGlory совершенно прав. Свойство inline-block не поддерживается ###браузерами.

ayax2005, 
Поддерживаются, но для изначально инлайн-элементов
Поменяйте в своем примере внутренние div на span

А для изначально неинлайновых замечательно эмулируется комбинацией display:inline + hasLayout в любом виде (чаще всего zoom:1). Так что разметку можно не менять.

Или я чего-то не понимаю или почему бы вот так не сделать. Вроде как попроще, без хаков и кроссбраузерно:

2 Rayled, данный способ подходит лишь в том случае, если знаешь ширину блока(экрана пользователя). Способы которые приведены выше работают одинаково при любом разрешении или при любой ширине блока, позиционирую два блока по середине экрана(блока).

Скажите, при каком разрешении данный код не будет ставить блоки по центру? По-моему эти три DIV всегда будут по центру родителя стоять и не важно задана у родителя ширина или нет. Кстати ширина дива с 420px установлена для того, чтобы регулировать расстояние между внутренними блоками без всяких margin,
поэтому только в одном случае пример не будет работать. Если неизвестна ширина ВНУТРЕННИХ блоков, а никак не экрана или родителя, но она-то как раз известна...



Это сообщение отредактировал(а) Rayled - 8.11.2010, 12:36

Вы не понимаете, у вас контейнеры фиксированной ширины. Уберите ее и заполните контейнеры текстом. Вы сразу же заметите, что ваш margin:0 auto; не работает. Именно по этой причине выше были предложены два способа центрирования блоков. Примеры приводились с шириной блока, лишь для того, чтобы показать наглядно.

Это сообщение отредактировал(а) FightInGlory - 8.11.2010, 18:57

FightInGlory, вы разрываете мне мозг.  Я все прекрасно понимаю и о том, что в случае нефиксированной ширины внутренних блоков мой способ не работает я сам написал в предыдущем посте. Но в самом задании были явно указаны блоки фиксированной ширины и о том, что они должны быть резиной не было ни слова. Я думаю вопрошающему товарищу нужно было отцентрировать блоки именно фиксированной ширины. Почему? Потому что ваш способ его тоже устроил, а он, как и мой, не работает при нефиксированной ширине. Попробуйте убрать в своем примере ширину у блоков .cont и заполнить их текстом, у вас блоки растянутся в ширину родителя и встанут не рядом, а один под другим...

Это сообщение отредактировал(а) Rayled - 8.11.2010, 20:50

2 Rayled, если вы не уверены в своих словах, то лучше не писать ерунду, а проверить. Удалив ширину и добавив текст вы убедитесь, что блоки позиционируются по середине.
Ваш способ отличается тем, что если необходимо будет вставить не два, а скажем три блока, придется менять ширину. А способы которые были предложены ранее в этом плане универсальны.
А кто кому разрывает еще мозг спорный вопрос.

FightInGlory, это уже интересно, мда... Хорошо, пойдем другим путем.

Вот ваш пример, я добавил только текст. Уберите width: 200px и посмотрите.



Причем здесь три блока в данном случае?