Консультации Портала - Консультация #150488

Задать вопрос Консультации Пользователи Форум

Задать вопрос экспертам

Консультация № 150488

14.11.2008, 00:14

0.00 руб.

0 2 2

Компьютеры Программирование

Добрый вечер! У меня есть два дива, один вложен в другой.

<div class="">
text text text text text
<div class="">
</div>
</div>

Ширина дива родителя 90% и эта ширина отображается правильно. Далее внутри этого дива идет какой то текст и еще один див. И я хочу чтобы второй див заполнил оставшееся пустое место после текста.
По идее width: 100% для второго дива должно сработать, т.к. ширина берется в процентах относительно родительского элемента (div), а не от body. Но получается все наоборот. Ширина выходит 100% относительно всего экрана, а не относительно дива, ширина у которого 90%.
Подскажите пожалуйста как правильно написать чтобы работало.

Спасибо заранее, уважаемые эксперты.

Обсуждение

Неизвестный

14.11.2008, 01:42

общий

это ответ

Здравствуйте, Pushkin Sanya!
У меня все получается. Смотри код в приложении

Приложение:
<html>

<head>
<style>
#inner
{ color: red; width: 100%;}
#outer
{ color: green; width: 90%; height: 100%; background-color: silver;}
</style>
</head>

<body>
<div id="outer">
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
<div id="inner">
some more text here some more text here some more text here some more text here some more text here some more text here some more text here some more text here
</div>
</div>
</body>
</html>

Неизвестный

14.11.2008, 07:23

общий

это ответ

Здравствуйте, Pushkin Sanya!
Все проще. Чтобы все работало, просто не указываем ширину для дочернего дива. Если для него не указан float, то он и так займет все доступное пространство в ширину, потому что для div по умолчанию работает свойство display:block;
То же самое происходит с любым блочным элементом, но для остальных указаны различные внутренние и внешние отступы(margin,padding).
Если в родительском div`е указан padding, то сбалансировать его действие для дочернего блока можно отрицательным margin`ом.

Форма ответа

Отправка постов/ответов доступна только зарегистрированным и подтвержденным пользователям.

Если Вы уже зарегистрированы на Портале - войдите в систему, если Вы еще не регистрировались - пройдите простую процедуру регистрации.