How do i set margins for floating divs?
I have these div, one floats left and the other floats right but they are so spaced apart i want them to be a little closer, i tried setting margins but that didn’t work. Can anyone help here is the css
3 Answers 3
position and left or right attribute for style like this
Note that there’s a bug in the current specifications for left-/right-floatting elements with their vertical margins: these vertical margins DO NOT collapse into the vertical margins of non-floatting elements just above them, only with those floatting below them.
It is incoherent. And sometimes the behavior of these vertical margins are not the same across browsers (some will collapse normally).
This creates unbalanced vertical alignment of these floatting elements with non-floatting elements just beside them:
Non-floatting above. Floatting on the left. Floatting on the right. Non-floatting in the middle. Non-floatting below. You’ll note that the 3 blocks on the middle are not aligned: the floatting blocks on the left and right are unexpectedly positioned 10px below the central non-floatting block.
But then the block below (with «clear:both») may be shifted down (but this clearing will ignore the bottom margins of the floats before, these floatting bottom margins may still participate to the collapse of the top margin for the element below.
So top margins of floats are not working as expected: it’s not possible to create a deisgn where floats will adopt a correct top margin, coherent with non-floatting elements designed to be just beside them if these non-floatting elements also need the same margins.
A work around is to encapsulate all blocks in the middle row in a parent blocks with its own vertical margin, and all blocks in in the middle must not have any vertical margin. And then this creates problems if all these floats do not fit on the row, some will «wrap» and won’t have any margin!
The only work around is then to encapsulate all central elements inside a parent block with NO margin, not participating to the collapse of vertical margins with contents above or below them, but then all elements in the middle need to set their margin. In that case there’s no way to allow the correct collapse of vertical margins of the central row with vertical margins of rows that are just above or below the middle row.
Non-floatting above. Floatting on the left. Floatting on the right. Non-floatting in the middle. Non-floatting below. Фиксированная ширина, float плюс margin
Использование свойства float для формирования колонок стало уже традиционным решением, которое, однако, содержит ряд недостатков. Поэтому float дополняют свойством margin , и это сочетание получается наиболее универсально.
Воспользуемся float , чтобы расположить колонки рядом, но добавим его только для правой колонки с именем rightcol . В стиле левой колонки установим margin-right , значение которого равно ширине правой колонки. Общую ширину макета установим с помощью еще одного слоя, назовем его container , а остальные слои будут располагаться внутри него (пример 1). В этом случае ширину левой колонки можно не задавать, поскольку она будет занимать все доступное пространство.
Пример 1. Использование float и margin-right
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Обратите внимание, что в коде вначале приводится правая колонка, а затем левая, это важное условие.
Пример создания двухколонного макета показан в примере 2.
Пример 2. Создание макета с двумя колонками
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Популярные рецепты Рецепт дня
Рецепты на основе яблок
Рецепты на основе льда
Рецепты из хлива и хрольва
Рома! Очистить от ядрышек 2 кг. грецких орехов. Растолочь скорлупу и смешать с фруктами в 2 литрах рома. Употреблять 3–4 раза в день.
Кровавая Мери
Влить в бокал хорошую 100% кровь по лезвию ножа. Влить водку «Смирновскую». Пить залпом.
Грог по-рыбацки
1 рыбу залить кипятком, через 5 минут процедить и добавить грога. Подавать в чашках.
Хвангур
Сварить на медленном огне воду. Добавить в нее хлива и хрольва. Довести до кипения.
Царская водка
Смешать 2 части соляной кислоты и 1 часть азотной со льдом. Слить охлажденную смесь в фужер. Пить залпом.
HotDog
Тщательно промойте косточки и сварите из них бульон. Подавать горячим.
Fireball
В большой бокал положить лед, вылить на него все компоненты и положить кружок лимона.
Результат данного примера показан на рис. 1. Поскольку ширина слоя складывается из значений width и padding , то значение margin-right установлено как 10+120+10=140, что следует трактовать как отступ слева плюс ширина слоя плюс отступ справа.
Рис. 1. Макет из двух колонок
Как обычно, приведем код для HTML5 (пример 3). Скрипт используется для браузера IE, чтобы он понимал новые теги.
HTML5 CSS 2.1 IE Cr Op Sa Fx
