горизонтальное выравнивание <div> внутри <div>

[terrrible]

Нагуглил много тем с похожими обсуждениями, но в моём случае никак не получается.

Код, который генерит php примерно такой:

<td colspan="5" width="707" align="center">
	<div id="container">
		<div id="leftcol">...</div>
		<div id="leftcol">...</div>
		<div id="leftcol">...</div>
		<div id="leftcol">...</div>
		<div id="leftcol">...</div>
		<div id="leftcol">...</div>
	</div>

CSS:

#container {
	width: 705px;
	text-align: center;
	border: 1px solid black;
	overflow: auto;
	margin: 0px;

}
#leftcol { 
	width: 200px;
	height: 200px;
	float: left;
	color: white;
	background: #8d7588;
	border: 1px solid black;
	margin: 2px;

Все <div> внутри контейнера выровнены по левому краю. Очень хочется их по центру)

[psywalker]

display: inline-block; + ширина, высота и родителю text-align: center; Для ИЕ6-7 кастыли.

[rediskavet]

Чево margin: 0 auto; ,вместо float: left; для внутренних блоков нельзя? Фвместо костылей для ие.

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

Edited July 13, 2011 by rediskavet

[terrrible]

  Quote

display: inline-block; + ширина, высота и родителю text-align: center; Для ИЕ6-7 кастыли.

display: inline-block; для вложенного <div>?

Не помогает.

Upd. Вырубил float: left; - заработало, спасибо!

  Quote

Чево просто margin: 0 auto; ,вместо float: left; для внутренних блоков нельзя? Фвместо костылей для ие.

Выстраивает всё в один вертикальный столбец.

Edited July 12, 2011 by terrrible

[Searcher]

id должно быть уникально, нельзя несколько одинаковых на страницу

[terrrible]

Опять вернулся к этому вопросу. Всё было нормально пока картинки квадратные. Добавил прямоугольные, стало разваливаться:

Первая слева картинка - квадратная, две следующие прямоугольные.

Но если сделать как в моём первом посте - всё здорово, но так же проблема с выравниванием по левому краю.

[psywalker]

  On 9/7/2011 at 11:13 AM, terrrible said:

Опять вернулся к этому вопросу. Всё было нормально пока картинки квадратные. Добавил прямоугольные, стало разваливаться:

Первая слева картинка - квадратная, две следующие прямоугольные.

Но если сделать как в моём первом посте - всё здорово, но так же проблема с выравниванием по левому краю.

А ты vertical-align: top; применяешь надеюсь?

[terrrible]

  On 9/7/2011 at 12:07 PM, psywalker said:

  On 9/7/2011 at 11:13 AM, terrrible said:

Опять вернулся к этому вопросу. Всё было нормально пока картинки квадратные. Добавил прямоугольные, стало разваливаться:

Первая слева картинка - квадратная, две следующие прямоугольные.

Но если сделать как в моём первом посте - всё здорово, но так же проблема с выравниванием по левому краю.

А ты vertical-align: top; применяешь надеюсь?

Эх, действительно работает) Спасибо!

А можно как-то сделать так, чтобы нижний ряд в галерее, когда в нём строка не полная, выравнивался по левому краю? Сейчас он по центру.

[psywalker]

  On 9/9/2011 at 4:39 PM, terrrible said:

  On 9/7/2011 at 12:07 PM, psywalker said:

  On 9/7/2011 at 11:13 AM, terrrible said:

Опять вернулся к этому вопросу. Всё было нормально пока картинки квадратные. Добавил прямоугольные, стало разваливаться:

Первая слева картинка - квадратная, две следующие прямоугольные.

Но если сделать как в моём первом посте - всё здорово, но так же проблема с выравниванием по левому краю.

А ты vertical-align: top; применяешь надеюсь?

Эх, действительно работает) Спасибо!

А можно как-то сделать так, чтобы нижний ряд в галерее, когда в нём строка не полная, выравнивался по левому краю? Сейчас он по центру.

Ну наверное можно вообще отказаться от выравнивания по середине?

[terrrible]

  Quote

Ну наверное можно вообще отказаться от выравнивания по середине?

А где именно отменять? В самой таблице, которая загружает в себя div-ы? Не получается.

А в самом div-e выравнивания вроде и не стоит.

[psywalker]

  On 9/13/2011 at 8:10 PM, terrrible said:

  Quote

Ну наверное можно вообще отказаться от выравнивания по середине?

А где именно отменять? В самой таблице, которая загружает в себя div-ы? Не получается.

А в самом div-e выравнивания вроде и не стоит.

#container {

width: 705px;

text-align: center;

[terrrible]

  Quote

text-align: center;

Не помогает. Всё остаётся на своём месте.

[psywalker]

  On 9/14/2011 at 6:42 PM, terrrible said:

  Quote

text-align: center;

Не помогает. Всё остаётся на своём месте.

Давай-ка ссылку на страницу. И покажи скриншот того, как должно быть, и как не должно.

[terrrible]

  On 9/14/2011 at 8:55 PM, psywalker said:

  On 9/14/2011 at 6:42 PM, terrrible said:

  Quote

text-align: center;

Не помогает. Всё остаётся на своём месте.

Давай-ка ссылку на страницу. И покажи скриншот того, как должно быть, и как не должно.

Ок, спасибо, выложу ссылку как залью на хостинг.

[Justnewone]

Набо обернуть все это хозяйство еще дивом, задать ему ширину (количество блоков в строке * ширину одного блока) и маргин 0 авто. А флоаты и прочее внутри можете оставить как было раньше. Иначе либо по центру, либо скриптом костыль (что есть гуано).

[mrbogus]

  On 7/12/2011 at 8:27 PM, psywalker said:

display: inline-block; + ширина, высота и родителю text-align: center; Для ИЕ6-7 кастыли.

Для внутренних дивов поставил display: inline-block;, для родителя поставил text-align. В нормальных браузерах работает. Но вот в ИЕ6-7 они растягиваются на всю ширину родителя. Можно по подробней про костыли для ИЕ6-7.

[buddah]

  On 2/29/2012 at 11:54 PM, mrbogus said:

  On 7/12/2011 at 8:27 PM, psywalker said:

display: inline-block; + ширина, высота и родителю text-align: center; Для ИЕ6-7 кастыли.

Для внутренних дивов поставил display: inline-block;, для родителя поставил text-align. В нормальных браузерах работает. Но вот в ИЕ6-7 они растягиваются на всю ширину родителя. Можно по подробней про костыли для ИЕ6-7.

display: inline;
zoom: 1;

Выставляешь в отдельный css-файл для старых ие и подключаешь его условными комментариями (кошерно), либо пишешь символ * перед свойствами (не кошерно зато быстро)

[mrbogus]

  On 3/1/2012 at 8:17 AM, buddah said:

  On 2/29/2012 at 11:54 PM, mrbogus said:

  On 7/12/2011 at 8:27 PM, psywalker said:

display: inline-block; + ширина, высота и родителю text-align: center; Для ИЕ6-7 кастыли.

Для внутренних дивов поставил display: inline-block;, для родителя поставил text-align. В нормальных браузерах работает. Но вот в ИЕ6-7 они растягиваются на всю ширину родителя. Можно по подробней про костыли для ИЕ6-7.

display: inline;
zoom: 1;

Выставляешь в отдельный css-файл для старых ие и подключаешь его условными комментариями (кошерно), либо пишешь символ * перед свойствами (не кошерно зато быстро)

Благодарю. Все хорошо, если конечно super preview 4 не врет, где я проверяю верстку для ie6-7. Не могли бы объяснить display: inline; zoom: 1; т.е. как это все происходит в браузере. О чем думает ie6-7. Поподробней.

[buddah]

  On 3/1/2012 at 10:49 AM, mrbogus said:

Не могли бы объяснить display: inline; zoom: 1; т.е. как это все происходит в браузере. О чем думает ie6-7. Поподробней.

Я не знаю, о чем думают ие6-7, но думалка у них явно набекрень)

А если серьезно, то мы включаем для элементов hasLayout + "просим" эти браузеры отображать элементы как строчные.

[TrueTrue]

Вопрос по теме:

Задача похожая!

Есть общий DIV container, в нём DIVшапка, DIVтело и DIVноги, по сути весь сайт,

необходимо что бы контейнер принимал ширину окна браузера

и разместить все дивы внутри контейнера по центру(горизонтально)

заказчик, сам шарит, сказал, что margin не использовать, потому что он не со всеми браузерами корректно работает.

и писать в css

Подскажите пожалуйста возможные варианты решения, неполучается, замучался...

[Switch74]

<!DOCTYPE html>
<html>
<head>
	<style>
		*{margin:0px;padding:0px;}
		html,body{height:100%;}
		#body{width:100%;}
		#header{margin:0px auto;width:1000px;	background:#999;}
		#content{margin:0px auto;width:1000px;	background:#ddd;}
		#footer{margin:0px auto;width:1000px;	background:#999;}
	</style>
</head>
<body>
	<div id="body">
		<div id="header">header</div>
		<div id="content">content</div>
		<div id="footer">footer</div>
	</div>
</body>
</html>

скажите в каком браузере не работает?