How do I place two paragraphs next to each other

Interview Questions

How do I place two paragraphs next to each other?

CSS Interview Questions and Questions

104. How do I place two paragraphs next to each other?

There are several ways to accomplish this effect, although each has its own benefits and drawbacks. We start with the simplest method of positioning two paragraphs next to each other.

<DIV style="float: left; width: 50%">Paragraph 1</DIV>
<DIV style="float: left; width: 50%">Paragraph 2</DIV>

Trickier is this example, which relies on positioning but does not suffer the vertical-overlap problems which plague many other positioning solutions. The problem is that it relies on an incorrect positioning implementation, and will break down dramatically in conformant browsers.

<P>
<SPAN STYLE="position: relative; left: 50%; width: 50%">
<SPAN STYLE="position: absolute; left: -100%; width: 100%">
Paragraph 1</SPAN>
Paragraph 2</SPAN>
</P>

If floating is not sufficient to your purposes, or you cannot accept display variances in older browsers, then it may be best to fall back to table-based solutions.

(Continued on next question...)