Align pieces of text onto the same line

Question

        <article id='Focus'>
            <h1 id='main'>Focus</h1>
                <article id='Tell'>
                    <h1>Tell</h1>

                </article>
                <article id='NStart'>
                    <h1>NStart</h1>
                </article>
                <article id='FSB'>
                    <h1>pppp</h1>
                </article>
        </article>

I have this html code and I want to make it so that its all aligned on the same line, with one positioned left, another in the centre and the other on the right. I have tried using float and text-align but these don't work. What CSS should I be looking at to make this work?

Answer 1

Would this solution be good for you? DEMO

Html

<article id='Focus'>
    <h1 id='main'>Focus</h1>
    <br/>
    <article id='Tell'>
         <h1>Tell</h1>
    </article>
    <article id='NStart'>
         <h1>NStart</h1>
    </article>
    <article id='FSB'>
         <h1>pppp</h1>
    </article>
</article>

CSS

article {
    width:33%;
    float:left;
    text-align:center;
}
#Focus {
    width:100%;
}

Answer 2

Use CSS:

#Focus article {
  float: left;
  width: 33%;
}

Answer 3

Tou can use this css:

#Focus article {
    width: 33%;
    float: left;
}

Here is the jsfiddle