Problems with article listing. Please help.

  • I’m developing a new layout which can be viewed here.

    I’m listing articles in 2 columns. Now here is my problem.
    Some articles may have 1-3 lines of headline and some articles may not have an image. This causes my DIV’s to have different height.

    Floating div’s with uneven heights does not produce good results.

    Therefor I have set a fixed height on my divs. The side effect is a lot of white-space, which does not look to nice.

    Does anyone have a good solution for this?

    Here is my style:

    /******************************************
*   Article list frontpage
******************************************/

.articleBox_column1, .articleBox_column2
{
  width: 280px;
  height: 180px;
  float: left;
  margin-bottom: 10px;
  padding-left: 10px;
}

.articleBox_column2
{
  margin-left: 10px;
  margin-right: 20px;
  float: right;
}

.articleBox_column1 h1, .articleBox_column2 h1
{
  font-family: Georgia,Times New Roman;
  font-size: 1.4em;
  font-weight: normal;
  padding-bottom: 3px;
  border-bottom: dashed 1px #d9d9d9;
  margin-bottom: 5px;
}

.articleBox_column1 ul, .articleBox_column2 ul
{
  list-style: none;
  font-family: Arial, Verdana, San Serif
}
.articleBox_column1 ul a:link, .articleBox_column1 ul a:visited,
.articleBox_column1 ul a:active
{
  font-weight: bold;
  font-size: 0.9em;
  color:#eee;
}

.articleBox_column1 img, .articleBox_column2 img
{
	max-width: 180px;
	max-height:110px;
	width: expression(this.width > 180 ? 180 : true);
	height: expression(this.height > 110 ? 110 : true);
	border:1px solid #999999;
	margin: 5px 5px 5px 0px;
	float: left;
}

.articleBox_column1 .date, .articleBox_column2 .date
{
  font-size: 0.95em;
}
Viewing 1 replies (of 1 total)
  • Thread Starter Steven

    (@spstieng)

    An my code looks like this

    <?php

    query_posts('showposts=6&cat=-235,15,19,-20');
    while (have_posts()) : the_post();
   	  $related_image_url = get_post_custom_values("related_image");
  	  $related_alternate_image_url = get_post_custom_values("alternative_image");
      $imgTitle = get_post_custom_values("image_title");
      $imgHtml = nf_getImageHTML($related_image_url, $related_alternate_image_url, $imgTitle, "");
      $loopcounter++;

      if ($loopcounter % 2 == 0)
     	  echo '<div class="articleBox_column2">';
     	else
     	  echo '<div class="articleBox_column1">';

    	echo '<a href="' . get_permalink() . '">';
      echo the_title('<h1>','</h1>');
      echo '</a>';
  		echo '<div class="catDate">';
  		/* echo  the_category(); */
  		echo '</div>';
      if(!empty($imgHtml))
  		{
  	  	echo '<a href="' . $permaLink . '">';
  	  	echo  $imgHtml;
  	  	echo '</a>';
  	  } ?>

      <span class="date">(<?php the_time('d.m.y'); ?>) </span>
      <?php
      if(empty($imgHtml))
        echo the_content_rss('Les mer','', '', 40);
      else
      echo the_content_rss('Les mer','', '', 16);

      echo '<br /><a class="floatRight" href="' . get_permalink() . '">Les mer</a>';

      echo '</div>';
      endwhile; 

?>
Viewing 1 replies (of 1 total)
  • The topic ‘Problems with article listing. Please help.’ is closed to new replies.