Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> position:absolute, вылазит контент 
:(
    Опции темы
Most
Дата 9.11.2010, 22:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 59
Регистрация: 11.5.2009

Репутация: нет
Всего: нет



Здравствуйте. Столкнулся с проблемой при отображении контента на сайте. Есть блок 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;
}



user posted image

PM MAIL   Вверх
ayax2005
Дата 10.11.2010, 01:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


echo $smile
**


Профиль
Группа: Участник
Сообщений: 516
Регистрация: 17.4.2008
Где: Питер

Репутация: 3
Всего: 11



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



--------------------
все вопросы - из-за неверной формулировки задачи
PM MAIL ICQ   Вверх
FightInGlory
Дата 10.11.2010, 12:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 123
Регистрация: 14.11.2006

Репутация: 1
Всего: 1



Код

*{
    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>


Посмотрите, может так вам подойдет?
PM MAIL   Вверх
Violator
Дата 11.11.2010, 14:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



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;
}

PM MAIL   Вверх
Most
Дата 11.11.2010, 21:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 59
Регистрация: 11.5.2009

Репутация: нет
Всего: нет



через float:right он выравнивается по правому краю... но располагается под блоком content... верстка - зло...
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0827 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.