Выявление проблемы с блоками которые выходят за пределы родительского элемента - HTML и CSS

roman8p8 · 15.04.2012, 18:39

***Выявление проблемы с блоками которые выходят за пределы родительского элемента***

Доброго вам времени суток!
Появилась у меня такая проблема: по какой-то причине из родительского элемента(желтый фон) вылезают дочерние элементы(зеленый фон) причем у родительского элементы не задана фиксированая высота.

Вопрос:
1)Из за чего так происходит?
2)Как добиться чтобы эти ссылки не вылезали из того самого желтого фона(#content) при этом чтобы родительский элемент автоматический разтягивался по высоте, по мере добавления новых элементов.
Заранее спасибо.

Вот скриншот моего безобразного результата верстки.
Я специально закрасил все элементы для лучшей наглядность(красный(#wrapper) желтый(#content) зеленый(#content a) голубой верхнии бордер(#footer))

Вот CSS код:

<style type="text/css">
#wrapper{background-color:red;
width:960px;
}
#content{background-color:yellow;
width:960px;
min-height:100px;
}
#content a{background-color:green;
display:block;
width:240px;
height:240px;
margin-bottom:10px;
}
#footer{border-top:5px solid blue;
width:960px;
height:300px;
margin-top:10px;
}
#content #r_block{
float:right;
padding:0 55px 0 15px;
}
</style>

Вот HTML код:

<body>
<div id="wrapper">

<div id="content">
<div id="r_block">
<a href="picture02/wagon.jpg" target="_blank"></a>
<a href="picture02/t37.jpg" target="_blank"></a>
<a href="picture02/f57.jpg" target="_blank"></a>
</div>
</div>

<div id="footer"></div>
</div>

</body>

ShnapS · 15.04.2012, 23:14

Это произошло из за правила float. Исправить можно, как вариант, добавив в #content свойство.

Код:

overflow: hidden;

maxpryg · 15.04.2012, 23:53

а еще можно так попробовать:
<div id="content" class="clearfix">
css:
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
Это способ на случай если в блоке с id="content" будут размещены абсолютно позиционированные элементы

Naive · 16.04.2012, 06:44

Прошу прощения, господа, но вы тут какую-то хрень городите. все решается блоком после плавающих элементов со свойством:

Код:

clear:both

15.04.2012, 18:39	#1
roman8p8 Новичок Джуниор Регистрация: 15.04.2012 Сообщений: 2	Выявление проблемы с блоками которые выходят за пределы родительского элемента *Выявление проблемы с блоками которые выходят за пределы родительского элемента* Доброго вам времени суток! Появилась у меня такая проблема: по какой-то причине из родительского элемента(желтый фон) вылезают дочерние элементы(зеленый фон) причем у родительского элементы не задана фиксированая высота. Вопрос: 1)Из за чего так происходит? 2)Как добиться чтобы эти ссылки не вылезали из того самого желтого фона(#content) при этом чтобы родительский элемент автоматический разтягивался по высоте, по мере добавления новых элементов. Заранее спасибо. Вот скриншот моего безобразного результата верстки. Я специально закрасил все элементы для лучшей наглядность(красный(#wrapper) желтый(#content) зеленый(#content a) голубой верхнии бордер(#footer)) Вот CSS код: <style type="text/css"> #wrapper{background-color:red; width:960px; } #content{background-color:yellow; width:960px; min-height:100px; } #content a{background-color:green; display:block; width:240px; height:240px; margin-bottom:10px; } #footer{border-top:5px solid blue; width:960px; height:300px; margin-top:10px; } #content #r_block{ float:right; padding:0 55px 0 15px; } </style> Вот HTML код: <body> <div id="wrapper"> <div id="content"> <div id="r_block"> <a href="picture02/wagon.jpg" target="_blank"></a> <a href="picture02/t37.jpg" target="_blank"></a> <a href="picture02/f57.jpg" target="_blank"></a> </div> </div> <div id="footer"></div> </div> </body>

15.04.2012, 23:14	#2
ShnapS Пользователь Регистрация: 15.05.2008 Сообщений: 44	Это произошло из за правила float. Исправить можно, как вариант, добавив в #content свойство. Код: `overflow: hidden;`

16.04.2012, 06:44	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Прошу прощения, господа, но вы тут какую-то хрень городите. все решается блоком после плавающих элементов со свойством: Код: `clear:both` Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
поля разела выходят за границы области печати	yurik85	Microsoft Office Word	9	22.04.2012 16:57
Как узнать вышел ли элемент за пределы другого элемента JQuery?	Arassir	JavaScript, Ajax	1	07.10.2011 12:43
[C++]:не выходят задачи	saider	Помощь студентам	1	02.12.2010 20:46
обрезка фона родительского элемента	Love_silense	HTML и CSS	5	14.08.2009 13:01
ФРС США снизила учетную ставку до 3.5% - большие деньги выходят в оборот	Alar	Свободное общение	7	24.01.2008 20:15

15.04.2012, 23:53	#3
maxpryg Новичок Джуниор Регистрация: 15.04.2012 Сообщений: 1	а еще можно так попробовать: <div id="content" class="clearfix"> css: .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; overflow: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} /* IE < 8 */ Это способ на случай если в блоке с id="content" будут размещены абсолютно позиционированные элементы