CODEWITHSUNDEEP
htmlcsscss-floattext-alignment
user3328513
user3328513

Reputation: 199

Align pieces of text onto the same line

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

Upvotes: 0

Views: 56

Answers (3)

Jos&#233; Barbosa
Jos&#233; Barbosa

Reputation: 903

Tou can use this css:

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

Here is the jsfiddle

Upvotes: 0

TylerH
TylerH

Reputation: 21086

Use CSS:

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

Upvotes: 0

Niklas
Niklas

Reputation: 13145

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

Upvotes: 1

Related Questions