My divs are overlapping, i'm lost - html

Question

Hey I can't figure out why my divs are overlapping and what i should do...
You can watch the site here: http://hersing.dk/job/
I would like for the div carrying the hr to appear underneed the header-info div
Heres is the code from the site:
#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>
I hope someome can figure this out, cause i'm pretty lost

Answer 1

Both .info-name and .info-picture are absolute positioned and .header-info has no height defined.
You'd rather use relative positioning + float + clear and/or display: inline-block for both .info-* rules and everything will be fine.

Answer 2

<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>
I think this will solve your problem...

Answer 3

In this case, although very impractical, the solution would be to add a line break <br> after the .header-info div.
I repeat, this solution is not the best one by far, and you should, as pointed out in the comments by Paulie_D, change your positioning layout method.

Answer 4

Everything inside the absolutely positioned .container would be better positioned relative. Use css float:left; or float:right; to position elements and clear:both; when you want the next element to start below all floated elements. Use padding on the container and margins on the floated elements for positioning.
Also give .container css class of overflow:auto; to wrap around all elements inside without having to set the height every time.