css - Stop borders from expanding into Margins/Padding -
i trying create meta section blog posts using twitter bootstrap. issue i'm running borders around divs expanding out negative margins of row , can't figure out why (borders in other divs not having problem).
if me figure out how stop top , bottom borders expanding left , right padding/margins, appreciated.
here's applicable css:
.row { margin-right: -15px; margin-left: -15px; } .col-md-3 { width: 25%; float: left; } .meta-entry-right{ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 12px; text-transform: uppercase; color: gray; } .meta-entry{ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 12px; text-transform: uppercase; color: gray; }
and here's html:
<footer class="row"> <div class="col-md-3 meta-entry"> author: <br> <?php the_author_link(); ?> </div> <div class="col-md-3 meta-entry"> posted on:<br> <?php the_time('f j, y'); ?> </div> <div class="col-md-3 meta-entry"> categorized:<br> <?php echo get_the_category_list(', '); ?> </div> <div class="col-md-3 meta-entry-right"> discussion:<br> <a href="<?php comments_link(); ?>"><?php comments_number(); ?></a> </div> </footer>
you can view issue in action here: http://onedirectionconnection.com/tester/
thanks in advance!
i'm not entirely sure after if this.
.footer .row { margin:0; }
i think can apply borders want.
Comments
Post a Comment