Uneven height - problem with column

[ZackWhite]

Hi,

I seem to have stumbled upon my next problem. I have a news page with all the news articles. Image height and excerpt all have the same height/length. But titles can ofcourse be of a variable length.

This causes the following problem: view attachment

Any ideas how this can be solved?

Small part of the code (all that is following is the same):

Code:

<div class="four columns">
    <div class="post_image"><img class="scale-with-grid" src="http://localhost/GetSimple/plugins/news_manager/browser/pic.php?p=nieuws_thumbnail/hpim1325.jpg&amp;w=480&amp;h=300&amp;c=1" /></div>
    <h1 class="title"><a href="http://localhost/GetSimple/news_post/?post=misschien-laten-we-het-beter-zoals-het-is">Misschien laten we het beter zoals het is.</a></h1>
    <h2 class="post_date">Gepost op: 31 Jan 2014</h2>
    <span><p>Sago tijd wel een mier toch doel. Krachtiger monopolies verwachten begrenzing nu beschaving om. Ze laag door in mont. Planten behoeft regelen als geleend bereikt toe men geleden. Kintya handel goping [...] </p></span>
    <h3 class="read_more"><a href="http://localhost/GetSimple/news_post/?post=misschien-laten-we-het-beter-zoals-het-is">Lees meer</a></h3>
</div>
                
<div class="four columns">
    <div class="post_image"><img class="scale-with-grid" src="http://localhost/GetSimple/plugins/news_manager/browser/pic.php?p=nieuws_thumbnail/6580_107469303079_65093253079_2114441_3911870_n.jpg&amp;w=480&amp;h=300&amp;c=1" /></div>
    <h1 class="title"><a href="http://localhost/GetSimple/news_post/?post=ik-heb-momenteel-een-appel-bij-me">Ik heb momenteel een appel bij me!</a></h1>
    <h2 class="post_date">Gepost op: 31 Jan 2014</h2>
    <span><p>Mislukking te vruchtbare is dweepzieke mogendheid ondernomen getaxeerde te. Al middellijn aanmerking nu ik huwelijken ze. Op mochten is procede in luister stukjes krijgen betaald. Vrouw ficus men [...] </p></span>
    <h3 class="read_more"><a href="http://localhost/GetSimple/news_post/?post=ik-heb-momenteel-een-appel-bij-me">Lees meer</a></h3>
</div>

[Timbow]

I don't reallly understand what has happened, or what you are trying to do. Is it four post extracts, or eight? or any number in four columns? and are they to be
1234
5678
or
1357
2468

and why do they have to have all the same height? And this is skeleton, yes?

[ZackWhite]

It are 8 posts and they should be ordered like this:
1234
5678

Now they are:
1234
xxx5
678

They don't have to be the same height, they just have to be aligned next to each other (each row = 4 articles) without that big empty hole in the middle. But I have no idea why this happens.

And yes, I'm using skeleton.

EDIT:
- Removed all the custom CSS and still the same problem.

[shawn_a]

This happens when one column is larger or smaller in your case, this is a very common issue with this kind of css layout and the fix is rather tricky. A quick fix might be setting a min-height on them.

[Timbow]

I think with skeleton there is a class .row so you wrap each row of columns in a <div class="row">

There isn't much documentation with skeleton that I ever found so there is for me often a bit of experimentation. So the <div class="row"> may or may not need to be class="row sixteen columns" and then the four nested columns may or may not need to have the first and last given alpha and omega classes, so maybe

<div class="row">
<div class="four columns alpha">...</div>
<div class="four columns">...</div>
<div class="four columns">...</div>
<div class="four columns omega">...</div>
</div>
<div class="row">
<div class="four columns alpha">...</div>
<div class="four columns">...</div>
<div class="four columns">...</div>
<div class="four columns omega">...</div>
</div>

but that alpha omega stuff can put you out by 10px because it is losing the 10px margin that all skeleton blocks have

[ZackWhite]

Might work but the problem is that I use this in combination with the news manager addon. So I use the funtion

Code:

nm_custom_display_recent('
     <div class="four columns">
          <div class="post_image"><img class="scale-with-grid" src="{{ post_image_url }}" /></div>
          <h1 class="title"><a href="{{ post_link }}">{{ post_title }}</a></h1>
          <h2 class="post_date">Gepost op: {{ post_date }}</h2>
          <span>{{ post_excerpt }}</span>
          <h3 class="read_more"><a href="{{ post_link }}">Lees meer</a></h3>
     </div>
');

No possibility to add the row class I guess.

[Carlos]

Would it be enough to separate 1234 and 5678 with <br class="clear" />?

If so, with latest NM Addons version 0.9.0 you may do it like this:

PHP Code:

<?php
$mytemplate = '
     <div class="four columns">
          <div class="post_image"><img class="scale-with-grid" src="{{ post_image_url }}" /></div>
          <h1 class="title"><a href="{{ post_link }}">{{ post_title }}</a></h1>
          <h2 class="post_date">Gepost op: {{ post_date }}</h2>
          <span>{{ post_excerpt }}</span>
          <h3 class="read_more"><a href="{{ post_link }}">Lees meer</a></h3>
     </div>
';
nm_set_custom_maxposts(4);
nm_custom_display_recent($mytemplate);
?>
<br class="clear" />
<?php
nm_set_custom_offset(4);
nm_custom_display_recent($mytemplate);
?>

[shawn_a]

I dont think so. I mean if you want it to be responsive and tile automatically, if its a static layout that would work I guess.

[Timbow]

<br class="clear" /> is a skeleton method for clearing columns, it's written in the css comments. Don't know what the effect would be of giving the 8 divs

Code:

display: table-cell;

or how x-browser it would be.

[ZackWhite]

Would it be enough to separate 1234 and 5678 with <br class="clear" />?

If so, with latest NM Addons version 0.9.0 you may do it like this:

PHP Code:

<?php
$mytemplate = '
     <div class="four columns">
          <div class="post_image"><img class="scale-with-grid" src="{{ post_image_url }}" /></div>
          <h1 class="title"><a href="{{ post_link }}">{{ post_title }}</a></h1>
          <h2 class="post_date">Gepost op: {{ post_date }}</h2>
          <span>{{ post_excerpt }}</span>
          <h3 class="read_more"><a href="{{ post_link }}">Lees meer</a></h3>
     </div>
';
nm_set_custom_maxposts(4);
nm_custom_display_recent($mytemplate);
?>
<br class="clear" />
<?php
nm_set_custom_offset(4);
nm_custom_display_recent($mytemplate);
?>

Although I think it's not really the way to work, it works for now. Content is still responsive. Will comment when I find a different solution.