Не работает margin-bottom

z-z · Регистрация: 22.06.2011

Author24 — интернет-сервис помощи студентам

Здравствуйте.

вот такая вот конструкция часто не хочет работать... в чем загвоздка и как ее исрпавить...?

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

http://jsfiddle.net/pfLm9/

HTML5

1
2
3

<div id="wrap">
    <div id="opt"></div>
</div>

CSS

*{margin: 0; paddind: 0;}
html, body{height:100%;}
 
#wrap{
    width: 100%;
    height: 50%;
    position: absolute;
    background: #ccc;
}
#opt{
    width: 300px;
    height: 100px;
    margin-bottom: 10px;
    background: red;
}

@sheila · 17.03.2013, 12:51

ДЕМО

HTML5

1
2
3

<div id="wrap">
<div id="opt"></div>
</div>

CSS

*{margin: 0; paddind: 0;}
html, body{height:100%;}
 
#wrap{
    width: 100%;
    height: 50%;
    background: #ccc;
    position: absolute;
}
#opt{
    width: 300px;
    height: 100px;
    background: red;
    position: absolute;
   bottom:0;
}

все время забываю, что у jsfiddle надо нажимать run, в jsbin все автоматом.. еще и update))

z-z · 17.03.2013, 13:51 **[ТС]**

sheila, спасибо. Но это я и сам мог)) просто если у дочернего элемента абсолютное позиционирование, его нельзя выровнять по горизонтали с помощью margin: 0 auto... или я этого не умею))

а писать отрицательные маргины на половину блока мне кажется некрасивым... хочется с position: relative как то это делать...

@sheila · 17.03.2013, 16:24

тогда так
ДЕМО

HTML5

1
2
3

<div id="wrap">
<div id="opt"></div>
</div>

CSS

*{margin: 0; paddind: 0;}
html, body{height:100%;}
 
#wrap{
    width: 100%;
    height: 50%;
    min-height:400px;
    background: #ccc;
    position: relative;
    text-align:center;
    padding-top:300px;
    -webkit-box-sizing border-box; /* Для Firefox */  
    -moz-box-sizing: border-box; /* Для Firefox */  
    box-sizing: border-box; /* Ширина блока с полями */
}
#opt{
    width: 300px;
    height:100px;
    background: red;
    position: relative;
   margin:0 auto;
}

только ограничение по высоте - это плохо, но больше ничего в голову не приходит))

z-z · 17.03.2013, 16:50 **[ТС]**

ладно, все равно спасибо)) идея изначально с вертикальным выравниванием была, из за чего height: 50%;... так что ограничение высоты тоже не подходит... ну ладно, наверно в каждом конкретном случае найдутся свои пути решения)

@tasik · 18.03.2013, 13:38

CSS

#opt{
    width: 300px;
    height: 100px;
    position:absolute;
    bottom:0px;
    background: red;
}

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	17.03.2013, 13:51 [ТС]	3
	sheila, спасибо. Но это я и сам мог)) просто если у дочернего элемента абсолютное позиционирование, его нельзя выровнять по горизонтали с помощью margin: 0 auto... или я этого не умею)) а писать отрицательные маргины на половину блока мне кажется некрасивым... хочется с position: relative как то это делать... 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	17.03.2013, 16:50 [ТС]	5
	ладно, все равно спасибо)) идея изначально с вертикальным выравниванием была, из за чего height: 50%;... так что ограничение высоты тоже не подходит... ну ладно, наверно в каждом конкретном случае найдутся свои пути решения) 0

	18.03.2013, 13:38