Question

I’m creating a WP theme that will have two sections midway down the page. On the left will be “Recent Work,” and on the right will be “Recent Blog Posts.” I’d like “Recent Blog Posts” to begin in the middle of the page; it’s left edge to line up with the container’s horizontal mid point. I’d also like for there to be a vertical line separating the two.
I’ve played with margins and padding, but can’t seem to get the effect I’m going for. Here’s an image of what I’m going for:

<div id="recent">
    <div id="recent-work">
            <p><span>Recent Work</span></p>

    <div class="next">
        <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
    </div><!-- end next -->
    </div><!-- end recent-work -->
    <div id="recent-blog">
        <p><span>Recent Blog</span></p>

    <div class="next">
        <a href="#"><img src="img/next.png" alt="Click for more information" /></a>
    </div><!-- end next -->
    </div><!-- end recent-blog -->
</div><!-- end recent -->

and

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent #recent-work {
    float: left;
}

#recent #recent-work .next{
    float: right;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#recent #recent-blog {
    float: right;
}

#recent #recent-blog .next{
    float: right;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

I’ve struggled with this since yesterday, so any and all help is greatly appreciated.

@Praveen

Answer 1

In your CSS, please add this line:

#recent #recent-work p {text-align: center;}

Update:

I added this:

#recent #recent-work p, #recent #recent-blog p {text-align: center;}

​