Div button to separate contents into two layers

[SonamArya]

Hi, Since we know we can use Div tag to right align and left align but everytime we use it, it gets printed on the next line. Suppose we have 2 paragraphs and we want to right align one and the other left align on the same line, how do we achieve it.

[rangana]

First, you need to know how the "paragraph" element behaves.

With that said, a paragraph element, created via <p> tag, is a block-level element. A block-level element occupies the entire width of the parent container. If it's the body, then it'll be 100% of body's width.

To align an element left/right, you would choose text-align property.

To position an element left/right, you would choose float property giving the values left/right respectively.

Hope this basic example helps:

Code: Select all

<style type="text/css">
p{
text-align:center;
border:1px solid #555;
height:300px;
}
#p1{
float:left;
width:350px;
}
#p2{
float:right;
width:350px;
}
</style>
<p id="p1">I'm paragraph 1</p>
<p id="p2">I'm paragraph 2</p>


P.S. the board is buggy.