html - Twitter bootstrap grid not aligning

Question

I'm having issue getting my grid to align correctly. Here is the HTML

<div class="span6" id="content">

        <!-- Category 2 is Programming category. -->

        <?php $programming_posts = get_posts('2'); ?>

        <div class="row-fluid">

            <?php foreach($programming_posts as $key => $post){ ?>

            <div class="span6 well well-small" id="post-preview">

                <?php echo $post->post_excerpt;?>

            </div>

            <?php }?>

        </div>

    </div>

Here is the CSS

#post-preview{
border: 1px solid rgba(140,140,140,1);
border-radius: 2px;
max-height: 135px;
min-height: 135px;
margin-bottom: 5px;

}

As you can see the first row is not aligned with the rows that comes after it. The first row is the row with the right alignment. I'm not sure how to fix this?

Answer 1

You html structure is bad as a row-fluid can have only maximum of 12 columns, ie in this case two <div class="span6 well well-small" id="post-preview"> elements. But in your case you are adding all post-preview divs to a single row-fluid

Your html must be structure should be like

<div class="row-fluid">
    <div class="span6 well well-small" id="post-preview1">
    </div>
    <div class="span6 well well-small" id="post-preview2">
    </div>
</div>
<div class="row-fluid">
    <div class="span6 well well-small" id="post-preview1">
    </div>
    <div class="span6 well well-small" id="post-preview2">
    </div>
</div>

Also the id should be unique in a document, you have many divs with id post-preview because of the loop

Answer 2

Approach A:

Since you have 4 blocks, you can use span3 class:

<div class="span3 well well-small" id="post-preview">
    <?php echo $post->post_excerpt;?>
</div>

Approach B:

If you want to keep the width and only display a pair of blocks in one line, then you can split pairs of divs into separate row-fluid (PHP code is just for reference):

<div class="row-fluid">
    <div class="span6 well well-small" id="post-preview1">
        <?php echo $post->post_excerpt;?>
    </div>
    <div class="span6 well well-small" id="post-preview2">
        <?php echo $post->post_excerpt;?>
    </div>
</div>
<div class="row-fluid">
    <div class="span6 well well-small" id="post-preview1">
        <?php echo $post->post_excerpt;?>
    </div>
    <div class="span6 well well-small" id="post-preview2">
        <?php echo $post->post_excerpt;?>
    </div>
</div>