Search code examples
htmlcssjekylljekyll-theme

custom jekyll frontpage, with a generated elements out of post variables. height problem

my problem is that the hight of the content isn't recognised which causes the body to be smaller than the content which leads to a lot more problems.

HTML:

<section id="contentbox">   
  {% for post in site.posts %}
  <article>
    <h2>
      <a href="{{ post.url }}">
        {{ post.title }}
      </a>
    </h2>
    <time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date_to_long_string }}</time>
    <p>
      {{ post.caption }}
    </p>
  </article>
{% endfor %}
</section>

CSS:

#contentbox {
      height: 100%;
}
article {
  width: 45%;
  float: left;
  height: 120px;
  padding: 2px 0 0 2px;
}

I have a bunch of articles listed but the section stays height:0

Solution

  • Put a clear fix element after your floating elements. E.g.: <div style="clear: both;"></div>

    It's a very common issue.