Я не совсем уверен, что вы спрашиваете, поэтому я сделаю попытку:
Столбцы
Если выЕсли вы работаете с макетом столбца, вы должны попробовать только плавающие элементы.Из-за того, как работает плавающий код, хакерские исправления будут ненужными (ссылка приведена ниже).Clearfix позволяет перемещать дочерние элементы, сохраняя при этом высоту родительского элемента и характер блока.Clearfix может быть добавлен только к элементам блока.
Для моего примера мы будем использовать макет с двумя столбцами - один столбец #content и столбец #sidebar -Вы можете сделать два, три или более.
Для родительского div (который содержит элементы #content и #sidebar), вам нужно добавить class = "clearfix".
Для содержимого div, вы захотите поместить его влево.Для div боковой панели вы захотите сместить его вправо.
Теперь CSS:
#parentDiv { width: 750px; margin: 0 auto; }
#parentDiv #content { float: left; width: 500px; }
#parentDiv #sidebar { float: right; width: 200px; }
Это должно создать коробку 750px с элементом содержимого слева ибоковая панель справа с 50px между обоими элементами (750- (500 + 200) = 50).
Плавающий модуль
Если это не такТо, что вы хотели, и вместо этого хотели создать элемент модуля (лайтбокс, всплывающее окно и т. д.), это тоже легко.
Сначала создайте div с именем #module.Вставьте в него свой контент.Допустим, вы хотите присвоить ему ширину 500 пикселей, и вы хотите, чтобы высота была статической на уровне 300 пикселей.Итак, мы сделаем это CSS:
#module { width: 500px; height: 300px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -250px; z-index: 100; }
Что здесь происходит?
Элемент #module устанавливается в position: absolute.Это означает, что оно будет плавать вокруг окна и не ограничено его родительским элементом.Мы позиционируем его на 50% слева от окна и 50% сверху, чтобы оно попадало в середину окна.Значения процентов необязательны, так как они корректируются при изменении размера окна.Без поля верхний левый угол элемента будет на 50% сверху и на 50% слева, поэтому нам нужно использовать запас, чтобы переместить его обратно на половину его ширины и половину его высоты.Это позволит нам идеально сфокусировать коробку посередине.Z-индекс добавлен, чтобы убедиться, что элемент находится поверх любого другого элемента, включая и другие позиционированные элементы.
Надеюсь, это поможет.
Ссылки