Мои дивы накладываются друг на друга, я теряюсь

Question

Эй, я не могу понять, почему мои дивы накладываются друг на друга, и что я должен делать ...

Вы можете посмотреть на сайте здесь: http://hersing.dk/job/

Я как для DIV, несущей час появляться underneed в заголовок-инфо DIV

Heres является код с сайта:

@font-face { 
 
    font-family: hersing; 
 
    src: url(lmroman10-regular.otf); 
 
} 
 
html, 
 
body { 
 
    font-family: hersing; 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 
.container { 
 
    width: 90%; 
 
    height: 90%; 
 
    left: 5%; 
 
    top: 5%; 
 
    background: green; 
 
    position: absolute; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.info-name { 
 
    left: 5%; 
 
    top: 10%; 
 
    position: absolute; 
 
    display: block; 
 
} 
 
.info-picture { 
 
    min-width: 250px; 
 
    min-height: 250px; 
 
    padding: 4px; 
 
    position: absolute; 
 
    top: 10%; 
 
    right: 5%; 
 
    background: black; 
 
    display: block; 
 
} 
 
.info-picture img { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#info-header { 
 
    font-size: 400%; 
 
} 
 
#info-title { 
 
    font-size: 150%; 
 
    font-weight: bold; 
 
} 
 
.header-info { 
 
    display: block; 
 
    padding: 20px; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
.stang-1 { 
 
    display: block; 
 
    width: 100%; 
 
    color: blue; 
 
    position: relative; 
 
} 
 
#hr-1 { 
 
    display: block; 
 
    height: 1px; 
 
    border: 0; 
 
    border-top: 1px solid #ccc; 
 
    margin: 1em 0; 
 
    padding: 0; 
 
    background-color: #f1a857; 
 
}

<div class="container"> 
 
    <div class="header-info"> 
 
    <div class="info-name" id="info-name"> 
 
     ... 
 
    </div> 
 
    <div class="info-picture" id="info-picture"> 
 
     <img src="images/picture.png" /> 
 
    </div> 
 
    </div> 
 
    <div class="stang-1" id="stang-1"> 
 
    <hr id="hr-1"> 
 
    </div> 
 
</div>

Я надеюсь, что someome может понять это, потому что я довольно потерял

Answer 1

<div class="container"> 
    <div class="header-info"> 
    <div class="info-name" id="info-name"> 
      ..... 
    </div> 
    <div class="info-picture" id="info-picture"> 
     <img src="images/picture.png" /> 
    </div> 
    </div> 
    <div class="stang-1" id="stang-1"> 
    <hr id="hr-1"> 
    </div> 
</div> 


    <style> 
@font-face { 
    font-family: hersing; 
    src: url(lmroman10-regular.otf); 
} 
html, 
body { 
    font-family: hersing; 
    height: 100%; 
    margin: 0px; 
} 
.container { 
    width: 90%; 
    height: 90%; 
    left: 5%; 
    top: 5%; 
    background: green; 
    position: absolute; 
    display: block; 
    clear: both; 
} 
.info-name { 
    left: 5%; 
    top: 10%; 
    position: absolute; 
    display: block; 
} 
.info-picture { 
    width: 250px; 
    height: 250px; 
    padding: 4px; 
    position: relative; 
    top: 10%; 
    left:70%; 
    background: black; 
    display: block; 
} 
.info-picture img { 
    height: 100%; 
    width: 100%; 
} 
#info-header { 
    font-size: 400%; 
} 
#info-title { 
    font-size: 150%; 
    font-weight: bold; 
} 
.header-info { 
    display: block; 
    padding: 20px; 
    position: relative; 
    width: 100%; 
} 
.stang-1 { 
    display: block; 
    width: 100%; 
    color: blue; 
    position: absolute; 
} 
#hr-1 { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #ccc; 
    margin: 1em 0; 
    padding: 0; 
    background-color: #f1a857; 
} 
</style> 

Я думаю, что это решит вашу проблему ...

Answer 2

В этом случае, хотя и очень непрактично, то решение было бы добавить разрыв строки <br> после .header-info дел.

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

Answer 3

Оба .info-name и .info-picture являются absolute расположены и .header-info не имеет height определен.

Вы бы лучше использовать relative позиционирование + float + clear и/или display: inline-block для обоих .info-* правил и все будет хорошо.

Answer 4

Все, что находится внутри абсолютно расположенного .container, было бы лучше всего расположено relative. Используйте css float:left; или float:right; для элементов позиции и clear:both;, когда вы хотите, чтобы следующий элемент начинался под всеми плавающими элементами. Используйте padding на контейнере и полях на плавающих элементах для позиционирования.

Также дайте .container css класс overflow:auto; для обертывания всех элементов внутри, без необходимости устанавливать height каждый раз.