两个div并排 - 一个在最左边，另一个在中间

Question

我正在创建一个WP主题，该主题在页面中间有两个部分。左边是“近期工作”，右边是“最近的博客帖子”。我想在页面中间开始“最近的博客帖子”;它的左边缘与容器的水平中点对齐。我也希望有一条垂直线将两者分开。 我玩过边距和填充，但似乎无法达到我想要的效果。这是我想要的形象：

<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 -->

和

#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;
}

自昨天以来，我一直在努力解决这个问题，所以非常感谢任何帮助。

@Praveen

Answer 1

在你的CSS中，请添加以下行：

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

<强>更新

我补充说：

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

Answer 2

希望我做对了 -

工作示例 - DEMO

HTML

<div class="wrap">
<div class="leftCont">
    <div class="leftEle"></div>
    <div class="leftEle"></div>
    <div class="leftEle"></div>
</div>
<div class="rightCont">
    <div class="rightEle"></div>
    <div class="rightEle"></div>
    <div class="rightEle"></div>
</div>
</div>​

CSS -

.rightCont , .leftCont{
width:50%;
float:left;
background-color:green;
min-width:340px;
}
.wrap{
padding-top:20px;
width:100%;
min-width:600px;
height:150px;
overflow:hidden;
background-color:black;
}
.leftEle , .rightEle{
width:30%;
border:2px solid black;
min-width:100px;
float:left;
background-color:yellow;
height:100px;
}