Aligning <p> in div

Question

I have the following div and paragraphs:

<div id="container">
                <p class="jsavoutput jsavscroll" readonly="readonly" style="width:225px; height:400px"> </p>
                <p id="title" style="text-align: center; verticle-align:text-top" > Title </p>
</div>​

Running this on jsfiddle, you can see that "title" appears at the bottom, unless the first <p> is removed. Why is that? How can I have the first paragraph as well as align the second one to the top middle?

Answer 1

As stated Andrei Drynov, because <p> is a block element it appears underneath the first one.

To put the second paragraph in line with the first you could add display: inline-blockto both <p> elements.

Demo: http://jsfiddle.net/AKaHN/

Answer 2

Because you're giving the first <p> tag a height of 400px. The title isn't really appearing at the bottom, it's just appearing below the first tag, which is taking up 400px vertically.

If you want them to appear next to each other, you could change the <p> tags to <span>s, or give the <p> tag a style of inline (or inline-block): <p style="display: inline">Something here</p>

<div id="container" style="text-align: center;">
     <span class="jsavoutput jsavscroll" readonly="readonly" style="width:225px; height:400px"> Test </span>
     <span id="title" style="text-align: center;"> Title </span>
</div>​​​​​​​​​​​​​​​​​​​​​​​

OR

<div id="container">
     <p class="jsavoutput jsavscroll" readonly="readonly" style="width:225px; height:400px"> Test </p>
     <p id="title" style="text-align: center; margin-top: -400px;"> Title </p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

You can adjust the margin-top value to move the second paragraph up or down, depending on where you want it.

Answer 3

<p> is a block element, so naturally the second paragraph is undernearth. Add background-color to both to see them.

Do you want them side-by-side? Then use float:left