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

<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