Html positions of article aside and divs - html

Question

Hi i have problem with positions of this tags
I have this code
<div class="wrap">
<div class="site-content">
<article class="col-sm-12 col-lg-8 article">
<div class="post-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce interdum tincidunt sodales. Fusce euismod viverra eros sit amet porttitor. Aenean purus neque, tempus quis diam in, scelerisque pellentesque leo. Suspendisse nec molestie erat. Duis faucibus, tellus eget pretium ullamcorper, turpis ante finibus mi, sed accumsan libero elit nec urna. Phasellus odio lectus, interdum eu vehicula a, malesuada vel tellus. Suspendisse sit amet ullamcorper nibh. Nullam fermentum mi sed malesuada ullamcorper. Etiam et lacinia elit. Mauris pellentesque nunc sapien, id ultricies magna venenatis non. Phasellus volutpat leo ac diam bibendum placerat. Vestibulum elementum, ex a tempor bibendum, nibh neque egestas enim, vel aliquet nisl turpis vel ligula. Sed sagittis dolor id metus ultrices tristique a nec nibh. Curabitur hendrerit rutrum dui, at placerat nisl rutrum ut. Duis vitae semper nunc, non aliquet sapien.
</p>
</div>
</article>
<aside class="col-sm-12 col-lg-4 aside-panel">
<h3 class="caption">Most read posts</h3>
<div class="top-post">
<div class="top-post-image">
<a href="#">
<img src="img/aside1.png" alt="">
</a>
</div>
<span class="post-info">28. November 2014</span>
<span class="separator">//</span>
<span class="post-info">Iphone</span>
<a class="top-post-title" href="#">Etiam lorem orci hendrerit ac neque id interdum fringilla metus</a>
</div>
<div class="top-post">
<div class="top-post-image">
<a href="#">
<img src="img/aside3.jpg" alt="">
</a>
</div>
<span class="post-info">28. October 2014</span>
<span class="separator">//</span>
<span class="post-info">Huawei</span>
<a class="top-post-title" href="#">Pellentesque tincidunt consequat nibh at vestibulum</a>
</div>
</aside>
</div><!-- end of .site-content -->
</div><!-- end of .wrap -->
problem is: my wrap have height:0px but why? i have my content in wrap... and second problem is: why text after tag is not under all of my content?
Here is my CSS:
html{
height: 100%;
}
/* Blocks */
div.container{
padding: 0;
width:100%;
}
/* Post */
article.article{
position: static;
font-size: 16px;
line-height: 28px;
float: left;
}
article.article p{
text-align: justify;
margin-bottom: 28px;
}
.aside-panel{
position: static;
}
.post-intro{
position: absolute;
color:#fff;
bottom: 0;
left: 0;
width: 100%;
}
.post-content:after, .post-content:before{
content: " ";
display: table;
}
.info{
font-size: 17px;
font-style: italic;
width: 100%;
color: #eee;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.info-left{
left:0;
float: left;
}
.info-right{
right:0;
float: right;
}
.perex{
font-size: 20px;
margin: 10px 0 30px 0;
font-style: italic;
}
.intro-image{
min-width: 100%;
width: 100%;
height: 550px;
max-width: 1000px;
background-repeat: no-repeat;
background-position: center;
}
.overlay{/* Image overlay */
position: relative;
height: 100%;
background-color: rgba(32,32,32,.7);
}
.search{
position: absolute;
width: 300px;
margin:80px 0 10px 0;
right: 0;
}
.search .searchbox{
width: 255px;
background: transparent;
font-size: 22px;
padding: 0 25px;
color: #fff;
font-weight: bold;
outline: none;
border: 1px solid rgba(238,238,238,.3);
height: 45px;
}
.search .submit{
width:45px;
height: 45px;
border: 0;
border: 1px solid rgba(238,238,238,.3);
border-left: 0;
float: right;
background: transparent;
color: #a9a9a9;
font-size: 22px;
}
.searchbox:focus{
border: 1px solid #fff;
}
.searchbox:focus ~ .submit{
border: 1px solid #fff;
border-left: 0;
color: #fff;
}
.focused{
border: 1px solid #fff;
}
.fieldset-default{
border: 1px solid #c0c0c0;
}
/* Change color of placeholder when input is focused */
.searchbox:focus::-webkit-input-placeholder {color: #fff;}
.searchbox:focus:-moz-placeholder {color:#fff;opacity:1;}
.searchbox:focus::-moz-placeholder {color:#fff;opacity:1;}
.searchbox:focus:-ms-input-placeholder {color:#fff;}
.post-brand{
/*change for bigger logo */
position: absolute;
width: 350px;
margin:80px 0 10px 0;
color:#fff;
left:0;
line-height: 45px;
font-size: 40px;
}
.search fieldset{
padding: 0;
}
/* Navigate bar/box */
.box{
height: 50px;
width: 100%;
background-color: rgb(0,0,0);
}
.no-format{
text-decoration: none;
color: inherit;
}
.no-format:hover{
text-decoration: none;
color: inherit;
}
.box.box-top{
top:0;
}
.box .logo{
color:white;
font-family: 'Lobster', cursive;
font-size: 32px;
float: left;
}
.box .spacer{
width: 1px;
height:30px;
margin: 10px 30px;
background: white;
float:left;
}
/* Default definition of box item */
.box-item{
padding: 0 15px;
color:#919090;
float: left;
line-height: 47px;
display: block;
font-weight: bolder;
z-index: 999;
}
.box-item:hover{
padding: 0 15px;
color:#fff;
float: left;
line-height: 47px;
display: block;
font-weight: bolder;
text-decoration: none;
}
/* Aside with top articles */
.top-post{
margin-bottom: 20px;
}
.top-post-image{
margin-bottom: 5px;
height: 170px;
overflow: hidden;
}
.top-post-image img{
width: 100%;
height: auto;
}
.post-info{
color: #888787;
font-size: 13px;
}
.separator{
color: #888787;
font-size: 13px;
font-style: italic;
}
.horizontal-divider{
border-bottom: 1px solid #626262;
border-top: 1px solid #626262;
height: 4px;
}
.top-post-title{
display: block;
font-weight: 600;
text-decoration: none;
color: #111;
font-size: 19px;
}
.top-post-title:hover{
display: block;
font-weight: 600;
text-decoration: none;
color: #111;
}
/* Wrappers */
.wrap{
position: relative;
width:100%;
margin:auto;
max-width: 1100px;
}
.box .wrap{
height: 50px;
}
.site-content{
position: absolute;
height: auto;
}
Here you have my complete code: HERE
Look at text after comment

Answer 1

Its because you have positioned .site-content absolutely. Position it relatively.
.site-content{
position: relative;
height: auto;
}
Updated Fiddle

Answer 2

Make the following correction:
Remove position:absolute from .site-content
Add overflow:hidden to .wrap
I have tested it. Let me know if you have any further doubts or queries.

Answer 3

my sugestion is:
.site-content{
position:relative;
min-height:100%;
overflow:hidden;}
i use it and this work for me.