TB fluid div alignment issue from hyde generated code

Question

I have the following responsive blog archives layout, which is suffering from alignment issues but I'm not sure which element to target to remedy the issue.

In the linked jsFiddle example, adjusting the width does produce a responsive layout, but the listing of blog posts does not flow in proper alignment.

The below code from the hyde static site generator seems to put redundant <p> tags in, which I'm not sure if it needs to be remedied there or if some CSS adjustments will suffice.

{% extends "base.j2" %}
{% from "macros.j2" import render_excerpt with context  %}
{% block main %}
{% block page_title %}

<h1 class="title"></h1>

    <div class="page-header">
    <h1>{{ resource.meta.title }}</h1>
    </div>


{% endblock %}


  <div class="row-fluid">

    {% for res in resource.node.walk_resources_sorted_by_time() %}


    {% refer to res.url as post %}

        <div class="span4">
              <a href="{{ content_url(res.url) }}"><h2>{{ res.meta.title }}</h2></a>

    <a href="{{ content_url(res.url) }}" class="postpic">{{ post.image|markdown|typogrify }}</a>

{{ res.meta.excerpt|markdown|typogrify }}

              <p><a class="btn" href="{{ content_url(res.url) }}">View details &raquo;</a></p>
            </div><!--/span-->

    {% endfor %}

          </div><!--/row-->


{% endblock %}

Answer 1

If you want to build a grid is best that every 3 span4 you generate a new row-fluid below the other. For example:

<div class="row-fluid">
   <div class="span12"> //These two row are our flexible container
     / GENERATE WITH YOUR CODE THIS STUCTURE UNDER EVERY 3 POST /
     <div class="row-fluid">
       <div class="span4"></div>
       <div class="span4"></div>
       <div class="span4"></div>
     </div>

I use the php for doing it, but I think that is a small error of logical structuration of your html in the cycle!