different height tiles confuse downstream layout

[maxheld83]

I've used some tiles on a page (same as in the home example on gh-pages), and would now like to add untiled, normal-width content below the tiles.

I expected that just closing the div with </div><!-- /.tiles --> would do the trick, but it's not.

I apologise in advance if this is an ignorant question, lacking the necessary CSS knowledge.

Here's the page (never mind the content)

---
layout: media
lang: en
category: teaching
permalink: /teaching/
trans: /lehre/
title: Teaching
share: false
tagline: PhD student in Bremen, Germany
tags:
- about
image:
  feature: https://dl.dropboxusercontent.com/u/5341489/images/Max/jacobs-teaching-gesture_SMALL.jpg
  caption:
  captionlink:
  credit: Jacobs University Bremen
  creditlink: http://www.jacobs-university.de
  location: 
  locationlink:

---

I enjoy teaching tremendously — and for selfish reasons, too:
I've noticed that I only *really* understood a subject (or someone else's understanding of it) if I have taught a class on it.
I like it:

<!--more-->

<div class="tiles">

<div class="tile">
    <h2 class="post-title">Interdisciplinary</h2>
    <p class="post-excerpt">Crossing disciplinary borders and venturing applications can deepen understanding, strengthen relevance and forge synthesis — but a rigorous foundation in <em>a</em> discipline always comes first.</p>
    <a href="http://www.maxheld.de/e-democracy/" class="btn-social default">E-Democracy</a>
</div><!-- /.tile -->

<div class="tile">
    <h2 class="post-title">Interactive</h2>
    <p class="post-excerpt">Meaningful visualizations, vibrant virtual and real discussion and the occasional movie segment can make teaching more effective, accessible and fun — but in technology and format, as elsewhere, form follows function.
    That said, I think some great new technology (such as <a href="http://www.github.com">Github</a> and other social media isn't used enough in classrooms, and I expect my students to be(come) reasonably savvy with it.</p>
    <a href="https://plus.google.com/communities/109716701795396972157" class="btn-social google-plus"><i class="fa fa-google-plus" aria-hidden="true"></i> German Politics and Culture</a>
</div><!-- /.tile -->

<div class="tile">
    <h2 class="post-title">In Writing (or Code)</h2>
    <p class="post-excerpt">An idea does not exist independent of its written expression.
    Intensive reading and writing are hard, ideally <a href="http://en.wikipedia.org/wiki/Practice_(learning_method)#Deliberate_practice">deliberate practice</a> for both teacher and student — but for the social sciences, at least, there are only very poor substitutes.</p>
    <a href="https://github.com/BildungBegabung/emile" class="btn-social default"><i class="fa fa-github" aria-hidden="true"></i> Emile</a>
</div><!-- /.tile -->

<div class="tile">
    <h2 class="post-title">In Service</h2>
    <p class="post-excerpt">Perhaps in the spirit of <a href="https://en.wikipedia.org/wiki/Public_sociology">public sociology</a>, student work can also engage and serve a wider audience of fellow citizens.
    Such purpose can focus attention and — as academics know — it's also motivating to write for <em>actual</em> readers.</p>
    <a href="https://github.com/maxheld83/samuelson" class="btn-social default"><i class="fa fa-github" aria-hidden="true"></i> Samuelson</a>
</div><!-- /.tile -->

</div><!-- /.tiles -->

<div markdown="0"><a href="http://www.ratemyprofessors.com/ShowRatings.jsp?tid=1144707" class="btn">RateMyProfessors.com</a> <a href="http://www.meinprof.de/lecturers/Maximilian_Held" class="btn">MeinProf.de</a></div>

Check out my evaluations on teacher rating sites:

This is what it looks like:

I'd like the stuff circled in red to begin a new "line" instead, not fill in the short tiles.

[maxheld83]

again, I took out the right panel as per #54, hope that doesn't screw things up.

[mmistakes]

The tile modules were developed for the archive layouts, that's why they're broken on this page with the media layout. I haven't fleshed them out to be used everywhere so you'll need to do some work to get them looking right.

It's likely related to thin gray line in your other issue and probably needs to clear the floats set on the tiles.

[maxheld83]

thanks. I've no switched the page to the archive layout, and gotten rid of the thin gray line in #59, but the layout is still out of whack as in the above (changing the layout between article, archive or media doesn't change anything).

Could you point me to the place, where I'd need to adjust (clear the floats) this?

[mmistakes]

Is the repo public somewhere? It's hard to troubleshoot CSS issues without seeing it in action.

Tiles really aren't all that portable at the moment and only work in the archive examples I include with the starter. Same goes for the home splash page stuff. I built that for the demo and haven't really documented it since it's not at all ready for use. Unless you're comfortable hacking away at the CSS to make things work.

[maxheld83]

Sorry, the website is public at http://www.maxheld.de and the repo at https://github.com/maxheld83/maxheld83.github.io.

I've switched all the sites with tiles to archive, but that hasn't solved the problem.

I'm also staying away from the home layout as you advised (for now).

I might be wrong, but it seems to me that the problem not only affects manual tiles stuff (as in the splash page), but also tiles created by {% include post-grid.html %}.

Like in the below:

### Recently

{% for post in site.posts limit:4 %} 
  {% include post-grid.html %} 
{% endfor %}

Lirum larum

I would expect that the Lirum larum starts a completely new line after the grid, but that isn't so.

I understand that the tiles functionality is undocumented but would appreciate any pointer as to where to start to fix this problem.

Guess I really have to learn CSS.

[mmistakes]

Couple of things going on here you can fix.

The Recently <h3> heading needs clear: both; on it to clear the tiles above.

Secondly. The tiles after the heading need to be wrapped in a <div class="tiles">` which should help with any other issues.

Third. "Lirum larum" needs a clear on it too. If you're not already using browser Dev Tools I strongly encourage you to. I was able to do all of these edits in browser to figure out the issues. It's a good way to troubleshoot before messing with your actual stylesheets and layouts.

The better solution would be to add a clearfix to .tiles so it auto clears an elements that come before or after it. I can't remember if I included a Sass mixin to do it, but if not check out this blog post on the details.

[maxheld83]

fantastic, thanks so much.

And yes, you did include a mixin to that effect, it's in (ships with?) /bourbon/addons:

@mixin clearfix {
  &:after {
    content:"";
    display:table;
    clear:both
  }
}

Here's what I ended up doing to solve my problem:

1. Wrap all post grids in tiles

<div class="tiles">
{% for post in site.posts limit:4 %} 
  {% include post-grid.html %} 
{% endfor %}
</div><!-- /.tiles -->

1. Declare and add a clearfix class to be used along with tiles

appended to _tiles.scss

.clearfix {
  @include clearfix;
}

and then called whenever I use the tiles class:

<div class="tiles clearfix">
...

At this point in my CSS learning curve, I'm sort of like a chimp who randomly bangs away at the keyboard and sometimes, by random chance, finds something that works, so this is probably somehow egregiously stupid, but it get's the job done.

Thanks for the pointers!

Will start using browser debug.