Place two paragraphs next to each other?

Question

I've been experimenting with paragraphs and writing to them from the script tag and was wondering if there is a way to place them next to each other horizontally rather than underneath. My current code is like this:

<p id="csvData"></p>
<p id="csvData2"></p> 

I can't work out how to get "csvData" and "csvData2" to go to next to each other.

Answer 1

It isn't a script thing, this would easily be done via CSS.

#csvData {
  border: 1px solid red;
  height: 200px;
  float: left;
  width: 45%;
}
#csvData2 {
  border: 1px dotted blue;
  height: 400px;
  float: right;
  width: 45%;
}

<p id="csvData"></p>
<p id="csvData2"></p> 

Answer 2

Use CSS to change their default behavior:

p {
    display: inline;
}

OR

p {
    display: inline-block;
}

It is worth mentioning to mention that when designing your layouts, to consider if you are using the correct elements for the case you are trying to solve. Perhaps there is another approach in your specific circumstance?

Read here: CSS display: inline vs inline-block

Answer 3

use display: inline;, display: inline-block; or float: left;

p {
  display: inline-block;
  }

<p id="csvData">1</p>
<p id="csvData2">2</p> 

Answer 4

There are several possible answers, depending on what you mean by "next to".

<p id="csvData"></p>
<p id="csvData2"></p>

If paragraph length isn't an issue, the first question might really be "Why do you need <p> tags?" Understanding the difference between block tags and inline tags is foundational in HTML. I mention this because you indicate you are new to HTML. You may find what you need simply by using <span> or some other tag. See the Mozilla Developer Network documentation for explanations of block and inline elements.

Using a different element, such as <span> is preferable in the long run to modifying <p> tags from the block type, in my opinion.

<!-- Alternative, with spans instead -->
<span id="csvData"></span>
<span id="csvData2"></span>

Or, if you must, you can use CSS

#csvData, #csvData2 {
   display: inline; /* or, inline-block */
}

@Moose provided a good link in a different answer to a question explaining the difference between block, inline, and inline-block. Worth reading.

If you want the paragraphs in a two-column layout, that question has many solutions here on StackOverflow. e.g., here, here and here.

Another possible solution is floats. Floats are applied via CSS, and cause elements to stack left (or right, depending on the declaration) with minimum widths. There are several complications with floats. Float changes the default width of elements, and may cause other complications related to object height/width. (For example, an otherwise unstyled paragraph takes as much width as it can naturally, but a floated paragraph has a smaller width.) Usually when you use floats, you'll want to manually specify a width, and will need to "clear" the floats later. There are many good resources on floats here, including here and here.

/* CSS */
#csvData, #csvData2 {
   border: 1px dotted blue; /* To show the paragraphs */
   float: left;
   width: 100px;
}

Answer 5

Actually, since you seem to want to display table data, why not make it a table?

table {
  width: 100%; /* not necessary if 100%, but can be set narrower here */
  }

<table>
  <tr>
    <td>
      <p id="csvData">One</p>
    </td>
    <td>
      <p id="csvData2">Two</p>
    </td>
  </tr>
</table>

Answer 6

p and div elements are block level elements where span is an inline element.

You can either wrap each <p> in a <div> or use <span>

Answer 7

Please try the following:

<p id="csvData" style="display: inline-block; width: 50%;"></p>
<p id="csvData2" style="display: inline-block; width: 50%;"></p> 

additionally you can add a css entry such as:

p#csvData, p#csvData2 {
    display: inline-block;
    width: 50%;
}

hope this helps.. cheers