CODEWITHSUNDEEP
javascripthtmlcssparagraphs
LegitBritish
LegitBritish

Reputation: 43

Place two paragraphs next to each other?

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.

Upvotes: 4

Views: 17943

Answers (7)

Moose
Moose

Reputation: 1317

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

Upvotes: 4

alttag
alttag

Reputation: 1173

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;
}

Upvotes: 3

Johannes
Johannes

Reputation: 67799

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>

Upvotes: 1

Adrian Bratu
Adrian Bratu

Reputation: 508

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

Upvotes: 0

Snowmonkey
Snowmonkey

Reputation: 3761

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>

Upvotes: 6

MannfromReno
MannfromReno

Reputation: 1276

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>

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53709

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

p {
  display: inline-block;
  }
<p id="csvData">1</p>
<p id="csvData2">2</p>

Upvotes: 2

Related Questions