WordPress.org

1. spstieng
   Member
   Posted 3 years ago #

   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;
   }

2. spstieng
   Member
   Posted 3 years ago #

   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; 
   
   ?>

Topic Closed

This topic has been closed to new replies.