Check out the image link here
I'm looking to position the share and read more buttons at the bottom of the div, similar to "Sample Post 14". The trick seems to involve using excerpt or dummy text. Is there a way to achieve this styling with the skeleton framework, given the different column classes like twelve columns or sixteen columns?
Below is my code snippet:
Index.html
<div class="sixteen columns outer_box">
<div class="inner_box articles">
<!--POST TITLE -->
<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;}