Here is the link for the image - http://s255.photobucket.com/user/testament1234/media/post_zps0c881b88.gif.html?sort=3&o=0
Basically i want the share buttons and read more button to be place at the very bottom of the div. Just like “Sample Post 14”. The only reason i managed to achieved that is because of the excerpt or dummy text. Is there anyway to accomplish that kind of styling. I’m using skeleton framework hence the class twelve columns or sixteen columns and etc
Here is my code:
Index.html -
<?php while ( have_posts() ) : the_post(); ?>
<div class="sixteen columns outer_box">
<div class="inner_box articles">
<!--TITLE OF THE POST -->
<h3 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<ul class="data">
<li><?php the_author_posts_link() ?> /</li>
<li><?php the_category(', ') ?> /</li>
<li><?php the_time('F jS, Y') ?> /</li>
<li><?php comments_number() ?></li>
</ul>
<hr>
<!--FIXED SIZE THUMBNAIL -->
<div class="align_thumbnail_right">
<div class="thumbnail">
<?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" width="250px" height="150px" >'; } ?>
</div>
</div>
<div class="content">
<!--TEXT -->
<?php the_excerpt(); ?>
<a href="<?php echo get_permalink(); ?>"><span>Read More</span></a>
</div>
</div>
</div>
<?php endwhile; ?>
Style.css -
.outer_box{border:1px solid #9f9191; margin:0px 0px 20px 0px}
.inner_box{margin:20px}
.articles h3 a{font-family: 'PT Sans', sans-serif; font-size:25px; color:black; text-decoration:none}
ul.data li, ul.data a{display:inline; font: normal normal bold 13px 'PT Sans', sans-serif; color:#565E66; text-decoration:none}
.content a{text-decoration:none; color:black; float:right; display:inline; font-weight:bold}
.content p{line-height:20px; margin-bottom:20px}
/*POST THUMBNAIL */
.align_thumbnail_right{float:right; margin:0px 0px 20px 20px; background-color:#E8ECEF;}
.thumbnail{margin:5px;}