1

Здравствуйте.

Подскажите, я не до конца понимаю как работает div верстка. При верстании страницы часто один div бывает внутри другого diva. И я никак не могу понять, как сделать, чтобы один блок дива который, например, я создаю для создания фона внутреннему блоку с текстом, растягивался так же как и растягивается внутренний див. Но у меня получается, что эти дивы как листы бумаги на столе - один легко выходит за пределы другого. Как мне сделать, чтобы размер внешнего дива увеличивался автоматически с увеличением внутреннего (чтобы они были взаимно зависимыми блоками, чтобы внутренний не мог выйти за пределы внешнего).

6 ответов 6

1

css:

div#big_div{
padding: 10px 20px 30px 40px;
border: 1px solid #f00;
margin: 200px;
}
div#small_div{
width: 40px;
height: 60px;
border: 1px solid #00f;
}

html:

<div id="big_div">
<div id="small_div">
</div>
</div>

Попробуйте так.

2
  • Да нет это не то, здесь предлагается задать фиксированную ширину и высоту с падингами, а для шаблона это не подходит, так как тексты контента разные, на одной странице влезет, а на другой не влезет. Мне надо универсальная команда которая заставляла бы внешний див расширяться вместе с внутренним. например у меня внешний див это контейнер для сайд бара и дива с контентом. я задаю этому внешнему диву цвет фоновый а сайд бару и контенту другой цвет ну вот например как здесь: krezland.ru/index.php?page=plati/start.html
    – Krezvaa
    22 авг 2012 в 22:37
  • Но проблема в том что, если я начинаю фиксировать высоту то когда дабавляю больше контента он вылазиет или на футер или уходит под футер вообще. А если контента мало то все поднимается вверх что не красиво.
    – Krezvaa
    22 авг 2012 в 22:38
1

Значит у одного установлено float:left, а у другого - нет.

Ещё нужно не устанавливать фиксированную ширину, если хотите, чтобы блок был резиновым.

1
  • чтобы справиться с float:left надо без указания ширины внешнего дива задать overflow:hidden
    – knes
    22 авг 2012 в 20:05
1

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

Если действительно доктайп не указан, попробуй вначале документа прописать:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
1

Чтобы внешний блок растягивался вместе с внутренним, вместо того чтобы выходить за рамки внешнего, не надо указывать размеры внешнему.

 <div id="main" style="min-height: 100%; width: 1000px;">
 <div id="content" style="width: 700px;">[статья]</div>
 <div id="menu" style="width: 300px;"><ul>[...]</ul></div>
 </div>

Высота будет столько, сколько нужно для нормального отображения всех вложенных блоков.

0

Используй это:

<div style="float:left; margin:0; padding:0 0 10px 0; min-height:auto; border:1px solid red;">

   <div style="float:left; margin:0 0 0 0; padding:0; min-height:100px; border:1px solid green;">
   </div>

</div>
0

Можно использовать jquery =) Там устанавливаешь относительные размеры блоков.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.