Parent div height 0, clearfix doesn't work

Question

So i have this problem with parent element height 0px. I Know that parent element with floated children will have height 0, but nothing helps, and i don't know why. Some pictures and code samples:

<body>
<div class="article-container">
 <article class="page-article">
  <div class="title">...</div>
 </article>
</div>
<aside>
 <div>...</div>
</aside>
</body>

   /*CSS*/

body,html{
 padding:0;
 margin:0;
 text-align:center;
}
aside{
    float: left;
    width: 25%;
}
.article-container{
    width:73%;
    float:right;
    padding: 0px 1%;
}
.page-article{
    width: 90%;
    display: inline-block;
    overflow: hidden;
    float:none;
}

chrome tells me this:

I used clearfix and that didn't help, css-tricks - didn't help Why is my div's height zero - didn't help

Also i've been adding 100% width divs at the end of the container with floated elements and that did help(a little), but after window resize everything crashed again. (chrome kept telling height: 0px; even before window resize)

I noticed that <aside> keeps the height, but the '.article-container' don't. I don't know what to do next...

EDIT:

Maybe For some of people like me, that clearfix, adding spans, divs, setting overflow to hidden, setting float to the parent element Didn't help, I actually find another problem that may cause such a behaviour.

Check if your jquery or javascript doesn't use a parent element. In my case: I am using masonry layout. > It works by placing elements in optimal position based on available vertical space. I set it to two columns for some pages to display posts but also by mistake i've been using it on pages when wanted to have just one column and everthing crashed but none errors occured.

Thanks @syllabix for giving me right direction

Problem Solved

Your html example is not explicitly setting a style tag - but in the image you've captured an inline style attribute with height 0 is showing up. Is there a some javascript/jQuery library you may be using that could setting this style unexpectedly? — syllabix, Dec 09 '15 at 23:33
@Oriol It is not duplicated, because i tried it and it didn't solve the problem. i am afraid i am using masonry layout [link](http://masonry.desandro.com/) but on the pages that i am using it the height is ok, but on pages without it height is 0. I didn't actually though of this before — Luke, Dec 10 '15 at 07:06
@Luke I tried your code and clearfix worked properly. Either you aren't using it correctly, or there is some code missing in the question. — Oriol, Dec 10 '15 at 10:29

Parent div height 0, clearfix doesn't work

0 Answers0