两个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; 
}