Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > position:absolute


Автор: Most 9.11.2010, 22:40
Здравствуйте. Столкнулся с проблемой при отображении контента на сайте. Есть блок content, в него горизонтально помещены два блока. Один блок с деревом tree, второй с контентом description.
Контент в блоке description вылазит за пределы блока content. Помогите решить задачу...

вот css трех блоков:

Код

#content_block #content
{
    position:relative;
}

#content #tree
{
    width: 299px;
    height:100%;
    float:left;
    
}

#content #description
{
    position:absolute;
    float: left;
    width: 598px;
    height: 100%;
    top:0;
    right:0;
}



http://ipicture.ru/Gallery/Viewfull/1976020.html

Автор: ayax2005 10.11.2010, 01:48
А к чему тут - #content #description - абсолютное позиционирование?
Попробуйте заменить height:100% на min-height:100% для начала.
Вообще, есть подозрение, что у вас где-то в другом месте жёстко задана высота.

Автор: FightInGlory 10.11.2010, 12:55
Код

*{
    padding:0;
    margin:0;
}
html,body{
    min-height:100%;
    height:100%;
    width:100%;
}
#content_block{
    height:100%;
    width:100%;
}
#content_block #content{
    position:relative;
    height:100%;
    width:897px;
    margin:0 auto;
}

#content #tree{
    width:299px;
    height:100%;
    background:red;
}

#content #description{
    position:absolute;
    width:598px;
    top:0;
    right:0;
    height:100%;
    background:blue;
}

<div id="content_block">
    <div id="content">
        <div id="tree">Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст</div>
        <div id="description">Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст Текст текст</div>
    </div>
</div>


Посмотрите, может так вам подойдет?

Автор: Violator 11.11.2010, 14:40
Most, 
Элемент с абсолютным позиционированием не занимает места в структуре страницы.
Если используете плавающие блоки, то нужно возвращать контекст форматирования, например через overflow: hidden для верхнего блока, и зачем вам position: absolute для блока description, сделайте ему float: right.
Код

#content_block #content
{
    width: ...;
    overflow: hidden;
}
#content #tree
{
    float: left;
    width: 299px;   
}
#content #description
{
    float: right;
    width: 598px;
}

Автор: Most 11.11.2010, 21:35
через float:right он выравнивается по правому краю... но располагается под блоком content... верстка - зло...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)