Проблемы с вмещением контента

roman8p8 · April 15, 2012

Доброго вам времени суток!

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

Вот скриншот моего безобразного результата верстки.

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

Вот 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>

</div>

</body>

alex_anderr · April 16, 2012

<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 class="clear"></div>
 </div>

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

.clear {clear:both;}

Так чтоль?

ceil100 · April 16, 2012

#content{background-color:yellow;
    width:960px;
    min-height:100px;
    overflow:hidden
}

alex_anderr · April 16, 2012

Я сначала тоже подумал, что ему overflow нужен, но походу не он.

ceil100 · April 16, 2012

да нет

плавающие элементы, не выпадают из родительского

подходит идеально, если только у него нет каких-то доп. запросов, о которых не написано.

но это уже не наша проблема.

зачем множить сущности без надобности

элемент clear отделяет footer от плавающих блоков но не решает проблему выпадения из content

alex_anderr · April 16, 2012

Нужно же, чтобы content расширялся от блочных ссылок. А если стоит флоат справа, то логично предположить, что будет и слева, и клеар в любом случае понадобится, иначе какой-то из столбцов может на футер залезть. Что гадать, пусть сам скажет

Sign In

Проблемы с вмещением контента

Question

roman8p8

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

alex_anderr

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

alex_anderr

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

alex_anderr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information