CSS – Why is Border not Working?

1 Views

I am currently coding a WordPress website. I have a sidebar and the main body for my blog posts. The sidebar currently has the following properties: 

.nav{
width:25%;
height: 100%;
background: #FFF;
display:block;
float:left;
position:relative;
border-right:thin solid #C8C8C8;
}

and the main body for blog posts:

Read More
body {
font-family: Myriad Pro, Tahoma, arial, helvetica, sans-serif;
font-size:16px;
margin-left:20%;
margin-right:20%;
}

.post {
padding-left:10px;  
border-left:thin solid #000000;
}

I am currently trying to add padding-left to .post so that there is a gap between the right border of the sidebar and the blog posts. However, this is not working (a gap is not created) for some reason. Nor is border-left (there is no border created; I tried removing the border-right property on the sidebar).

This is currently the code for index.php 

   <div id="blog">
    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
    <div class = "sidebar">    
        <?php get_sidebar(); ?>
    </div>
    <div class="post">
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <div class="entry">
            <?php the_post_thumbnail(); ?>
            <?php the_content(); ?>

            <p class="postmetadata">
            <?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br />
            <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
            </p>

        </div>
    </div>

How do I make padding-left and border-left work for the main blog posts?

Thanks!

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Padding is applied within the element, so the border is on the other side of the padding. What you need is margin, which is applied outside of the element:

    .post {
    margin-left:10px;  
    border-left:thin solid #000000;
}

    Here is an article explaining padding and margin in more detail.

  2. This sounds like a conflict between the default WordPress CSS and your themes CSS file(s). A quick hack is to add !important to the end of the CSS declarations as follows: 

    .post {
  padding-left: 10px !important;  
  border-left: thin solid #000000 !important;
}

    A long-term solution is to examine what CSS files are loaded (and in what order) and what selectors are being used. Excellent resource: http://codex.wordpress.org/CSS_Troubleshooting