div падает

[P0jar]

В общем, в div container у меня внутри три div-блока. Размером 20%, 55% и 25% соотв. Для расположения их по горизонтали я применил свойство float:left. 

Проблема: При попытке расширить средний блок (то есть, увеличить содержимое в ширине) (1) 55%, третий блок (2) 25% просто падает под него, не оставаясь на месте.

А вставка background-image вообще работает неадекватно. Изображение вставляется только на 10%, словно обрезанное. 

 

max-width: 960px; -  блока(1) 

 

Заранее благодарен за любую помощь. Я пока только учусь вёрстке. Много чего на практике только испытываю. 

[andrey7287]

Ну собственно я вам сразу написал что делать.

 

 

Один из вариантов решения - обернуть его (содержимое) в  <div>

и уже этому диву задать необходимую ширину.

 

 div menu обернуть ещё в один div, которому задать width 20%

Edited November 13, 2015 by andrey7287

[andrey7287]

  Видимо содержимое выходит за пределы блока, например по причине не учтенных отступов. Один из вариантов решения - обернуть его (содержимое) в  <div> и уже этому диву задать необходимую ширину.

  

  ЗЫ Приводите в качестве примера конкретный код а не описание, с background-image вообще не понятно в чем трудности. 

[Mozzie]

А почему он должен не падать? у тебя же левый 20 правый 25. При попытке расшить центральный блок (который 55) нужно третий блок который падает сделать меньше что бы ему хватало место.

[P0jar]

Ребята, извиняюсь. Вот код. 

<div class="container">        <div class="menu">            <header class="head0">[Навигация]</header>            <nav>             <ul>                 <li><span><a href="#1">Общая информация</a></span></li>                 <li><span><a href="#2">Карта Зоны</a></span></li>                 <li><span><a href="#3">База данных</a></span></li>                 <li><span><a href="#4">Мой профайл</a></span></li>                 <li><span><a href="#5"><strong>Новое!</strong><br>Погода в Зоне</a></span></li>                </ul>            </nav>                  </div>         <div class="pdabody"> /* Проблемная зона */             <p>text</p>         </div>         <div class="textarea">         <article>             <header class="head">Что нового в  Зоне...</header>             <p class="content">             <ul>              <li><span><a href="#6"><strong>Важно!</strong>Новые данные о Выбросе...</a></span></li>              <li><span><a href="#7">Исследованы свойства артефактов из ходки Графа...</a></span></li>              <li><span><a href="#8">Выводок Химер в Тёмной Долине...</a></span></li>              <li><span><a href="#9">Как уберечь себя от пси-излучения...</a></span></li>              <li><span><a href="#10">Водка в борьбе с радионуклидами: правда или ложь?</a></span></li>             </ul>             </p>             </article>         </div>        </div> 

ЗЫ Приводите в качестве примера конкретный код а не описание, с background-image вообще не понятно в чем трудности.

То есть, div класса pdabody (самый большой средний элемент) должен быть с картинкой, внутри которой уже текст. И я решил этому div задать свойство bacground-image. Но это не работает адекватно. Картинка появляться не хочет, а лишь смещённый обрезок сверху. 

 

А почему он должен не падать? у тебя же левый 20 правый 25. При попытке расшить центральный блок (который 55) нужно третий блок который падает сделать меньше что бы ему хватало место.

Извиняюсь за мою ночную ошибку. Высота. При попытке увеличить в высоте. Если бы проблема была в ширине, тут, естественно, всё понятно. 

 

  Один из вариантов решения - обернуть его (содержимое) в  <div> и уже этому диву задать необходимую ширину.

И уже к этому внутреннему контейнеру применять background и прочее? 

[andrey7287]

  

Ребята, извиняюсь. Вот код. 

Тут всё OK, теперь CSS. 

[P0jar]

Тут всё OK, теперь CSS. 

.pdabody {    width: 55%;    margin: auto;    max-width: 960px;    float: left;}

Вот свойства, которые применены к контейнеру pdabody (средний и самый большой элемент) 

Ну и вот ещё связанный код. Это аналогичные строки, ответственные за расположение:

 

Самый первый крайний див с левой стороны.  

.menu {    width: 20%;    float: left;    margin-right: 150px;}

С правой

.textarea {    width: 20%;    float: left;}

Edited November 12, 2015 by P0jar