Выравнивание изображения в резиновом блоке

[Andyk]

Здравствуйте. Не могу найти решение, надеюсь, вы мне поможете.

Есть div1 с шириной 100%

В нем еще два div'а:

.div2 {
width: 80%;
height: 60px;
border: 1px solid blue;
display: inline-block;
float: left;
overflow: hidden;
}

.div3 {
float: right;
width: 19%;
height: 60px;
display: inline-block;
background-image: url("{T_THEME_PATH}/images/bg_tex2.jpg");
border: 1px solid #BFBFBF;
}

В левый (div2) вставляем картинку и она прижимается к верхему и левому краям div'а.

Можно кроссбраузерно выровнять данное изображение по вертикали и горизонтали без использования php и js?

[swetlana]

Можно.

.div2 {

width: 80%;

height: 60px;

border: 1px solid blue;

display: table-cell;

float: left;

vertical-align: middle;

overflow: hidden;

}

Edited February 6, 2011 by swetlana

[Andyk]

Не работает. Если убрать float: left div2 растягивается по все ширине и вытесняет div3 вниз.

Смена display: inline-block на display: table-cell абсолютно ничего не меняет.

Если все-таки float: left вернуть то все возвращается на свои места. Без изменений.

[swetlana]

ну а подумать?

[elder mode on]вечно вы хотите готовых решений и не довольствуетесь, когда вам дают пищу для размышлений[/elder mode off]

display: table-cell что означает?

Что включается эмуляция табличного отображения.

А как должна себя вести ячейка таблицы в окружении всяких блочных и блочно-строчных элементов?

Правильно, как белая ворона в стаде баранов. Вот она и чувствует себя неуместно и кажет чушь какую-то вместо ожидаемой картинки.

Второму-то блоку тоже надо display: table-cell указать.

Что, теперь с шириной проблемы? Не считается ширина 80% и 19% от div1?

Сами поймёте почему или лучше сразу рассказать, что ширина ячеек в процентах считается от ширины таблицы?

[Andyk]

Что, теперь с шириной проблемы? Не считается ширина 80% и 19% от div1?

Сами поймёте почему или лучше сразу рассказать, что ширина ячеек в процентах считается от ширины таблицы?

В таком случае не работает overflow: hidden

div1 может быть только display: block иначе ломается вся верстка страницы.

[swetlana]

что-то мне подсказывает, что ненужный мудрёж где-то ещё раньше.

Общую задачу опишите пожалуйста.

Для чего все эти блоки с ненужными свойствами?

[rus]

не оно?

[Vlad]

Почему бы вам просто не воспользоваться таблицей?

[Andyk]

не оно?

К сожалению нет.

Почему бы вам просто не воспользоваться таблицей?

что-то мне подсказывает, что ненужный мудрёж где-то ещё раньше.

Общую задачу опишите пожалуйста.

Для чего все эти блоки с ненужными свойствами?

Форум на движке phpbb, стандартная тема prosilver. Нужно поместить в шапку иллюстрацию (процентов 70-80 по ширине) и на том же уровне форму входа+личный раздел+новые сообщения на оставшуюся ширину. Поскольку ширина окна заранее не известна, изображение будет для максимального разрешения. А значит, оно должно центрироваться по горизонтали, высота в принципе, может быть указана и жестко.

Выше двух блоков div, описание которых в первом сообщении темы есть еще три блока div ну и body.

body с фоном

body {
	background: url("./styles/prosilver/theme/images/patern.jpg") repeat scroll 0 0 transparent;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-size: 10px;
	padding: 0 0 20px;
	margin: 0;
	padding: 0;
}

Первый див на странице

Градиент для фона

div {
	background-image: url("./styles/prosilver/theme/images/wrap_grad.png");
	background-repeat: repeat-x;
	min-height: 721px;
	padding: 2% 2% 0;
	margin: 0;
	padding: 0;
}

Второй див

Выравнивает, "держит" форум

div {
	border: 1px solid #909090;
	margin: 0 auto;
	max-width: 1650px;
}

Третий див

Текстура для форума

div {
	background-image: url("./styles/prosilver/theme/images/bg_tex.jpg");
	border: 1px solid #FFFFFF;
	margin: 0 auto;
	max-width: 1650px;
	padding: 20px;
}

Дальше div2 в который пытаюсь поместить изображение и div3 для формы входа и личной панели.

Возможно divов многовато, но я только учусь

[swetlana]

Andyk, так картинку фоном, тут же всё очевидно. И никаких этих блоков не нужно.

Максимум — один, который эту картинку и будет содержать.

[Andyk]

кхм

зациклился на вставке картинки и все тут а решение под носом, спасибо