|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
15.04.2012, 18:39 | #1 |
Новичок
Джуниор
Регистрация: 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 |
Пользователь
Регистрация: 15.05.2008
Сообщений: 44
|
Это произошло из за правила float. Исправить можно, как вариант, добавив в #content свойство.
Код:
|
15.04.2012, 23:53 | #3 |
Новичок
Джуниор
Регистрация: 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" будут размещены абсолютно позиционированные элементы |
16.04.2012, 06:44 | #4 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Прошу прощения, господа, но вы тут какую-то хрень городите. все решается блоком после плавающих элементов со свойством:
Код:
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 |