How to make divs float on both ends of another div?

Tags: html,css

Problem :

I have tried this so far,

http://jsfiddle.net/BXSJe/4/

I am trying to place 2 divs in the left and right ends of another div, I tried using float:left and float:right but they are showing up in new Lines

I want something like this,

[[leftcap]................. TITLE ............... [rightcap]]

I'm really sorry I can't represent better than this.

HTML

<div id="shell">
    <div id="title">
        <div id='leftcap'>o</div>
        TITLE HERE
        <div id='rightcap'>x</div>
    </div>
    <div id="content">Content</div>
</div>

CSS

 #shell {
 width:500px;
 height:300px;
 background:lightGrey; 
}

#title {
 background:green;
 padding:5px;
 border-radius:25%;   
 text-align:center;
}
#content
{
    text-align:center;
    vertical-align:center;
}
#leftcap
{
    width:10%;
}
#rightcap
{
    width:10%;
}
#leftcap,#rightcap
{
    height:100%;
    width:10%;
    background:red;
}

UPDATE: Using float property solved the problem, I have another question, how to vertically center align the text in a container div ?

---

Solution :

What you need is CSS's float property which kind of forces an element to be aligned either left or right.

Updated fiddle: http://jsfiddle.net/BXSJe/820/

Hope this helped. :)