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

Question

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

Wow just deleting the float fixes everything... don't know why or how to get them to float anyway but hey, css... — Hisfantor, Mar 11 '19 at 12:38

score 1 · Accepted Answer · answered Mar 11 '19 at 12:42

1

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

It's a very common issue.

answered Mar 11 '19 at 12:42

Sergej

2,030
1
18
28

thank you for the answer but how does this work? I have floating elements and in between non floating. now they are still a single column – Hisfantor Mar 11 '19 at 13:04

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

1 Answers1