Как выровнять два блока ?

Question

[Andrey_nk]

На сайте есть блок с картинкой, справа от него появляется блок окно, при этом происходит смещение блока с картинкой, чтобы центрировать изображение.

Как центрировать блок и изображение на различных масштабах и разрешениях ?

8bit-studio.ru/site.php

Answer 1

[Виталий Киренков]

Media queries

Comments

[Andrey_nk]

Media вариант , но нужно много условий прописать.

Answer 2

[Юрий Лобанов]

Ну Вы появляющийся блок залепили абсолютом, теперь расплачиваетесь. Надо было появляющийся блок с регистрацией помещать в блок box-languages. По крайней мере так бы верстка не рассыпалась.
P. S. Скажите, Вы правда надеетесь доверстать сайт, используя тостер?

Comments

[Виталий Киренков]

Я тоже хотел это написать, но как то обижать человека не хотелось =)

[Юрий Лобанов]

@DeLaVega ну, во-первых, при этом я все подсказал один из вариантов решения. Во-вторых, я не оскорбляю, а говорю правду. Я не знаю почему автор взялся делать эту задачу, но знаний явно не хватает. Если это не просто помощь друзьям, а работа на заказ - то тем более.
Например, если Вы задаете вопрос, то скорее всего ищете более простой способ или устраняете какой-то пробел в знаниях. Здесь же налицо желание сделать проект всем сообществом.

[Andrey_nk]

@iiil Вы предельно корректны в своих замечаниях =) приятно. Правда обижает, когда её не принимаешь.

Блок я вынес абсолютом, т.к. картинка центральная растягивается в % соотношении.

Пробую в момент клика рассчитать ширину картинки, чтобы её зафиксировать и сдвинуть влево. Если будет запоминаться размер картинки, то можно будет в один блок запихнуть вместе с появляющейся формой. Похоже неправильно присваиваю значение переменной.

Такой код:

$('#open-close').click(function(event) {
event.preventDefault();

// Рассчитываю ширину картинки и присваиваю значение классу
var img = new Image();
img.onload = function() {
var width = this.width;
}
img.src = '8bit-studio.ru/images/languedges.png';
$('.lang').css({'width': '$width'});
$(".box-languages").addClass("lang");

$(".box-languages").addClass("float-left");
$('#block-links').show();
$('#block-links1').hide();
});
$('#close').click(function(event) {
event.preventDefault();
$('#block-links').hide();
$(".box-languages").removeClass("float-left");
$(".box-languages").removeClass("lang");
});