CODEWITHSUNDEEP
htmlcss
Jake_the_camper
Jake_the_camper

Reputation: 90

How do i move a paragraph next to a heading

https://i.sstatic.net/tCTpv.png 

<html>

<body>
  <h1>heading</h1>
  <p>paragraph</h1>
</body>

</html>

I have searched but I cant find out how to move a paragraph nest to a heading. like this:

HEADING paragraph

Upvotes: 2

Views: 5279

Answers (4)

n1kkou
n1kkou

Reputation: 3142

h1, p{ display:inline; vertical-align:middle;}

By default, h1 and p elements have a display:block rule, which makes them occupy a full width row. Setting them to display:inline, will make the elements occupy only as much as they contain(e.g. they will only take as much space as the text inside them), without no line breaks before and after them. Also check this linke for a good explanation regarding the additional issues with margins,padding, width properties, applied to inline elements: Display rule clarification(external link)

Upvotes: 1

James
James

Reputation: 41

I don't really like styling listed as tag attributes. It makes for harder to read to HTML files and further complicates things if you later add a css file to your HTML document. If you don't want to link to an external css file then I personally would use the style tag in the head section of the HTML document. 

<html>
<head>
   <title> page title here </title>
   <meta charset ="utf-8">
   <style>
   p, h1 {
   display: inline;
   }
   </style>
</head>
<body>
   <h1> Here is our heading!</h1>
   <p> and here is our paragraph next to it. </p>
</body>
</html>

However I believe this will still cause the paragraph to wrap around under the heading when it reaches a new line. If this isn't what you want then you will need to use some div tags. I would do something like this...

<html>
<head>
   <title> page title here </title>
   <meta charset ="utf-8">
   <style>
   .container {
       clear: both;
   }
   .headingDiv {
       float: left;
       width: 30%;
       display: inline;
    }
    .paraDiv {
        float: right;
        width: 70%;
        display: inline;
    }

   </style>
</head>
<body>
    <div class="container">
        <div class="headingDiv">
            <h1> Here is our heading!</h1>
        </div>
        <div class="paraDiv">
            <p> And here is our paragraph next to it. And here is our paragraph next to it. And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it. </p>
        </div>
    </div>
    <div class="container">
        <div class="headingDiv">
            <h1> Here is our heading!</h1>
        </div>
        <div class="paraDiv">
            <p> And here is our paragraph next to it. And here is our paragraph next to it. And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it.And here is our paragraph next to it. </p>
        </div>
    </div>
</body>

Upvotes: 0

Asons
Asons

Reputation: 87191

May I suggest you use inline elements instead of making one out of block elements.

.heading {
  font-size: 24px;
  font-weight: bold;
}
<span class="heading">heading</span>
<span>paragraph</span>

Both p and h1 is suppose to be on their own line, so if you must, I suggest you give them a class name or else all of them will have the new display type.

.inline {
  display: inline;
}
<h1 class="inline">heading</h1>
<p class="inline">paragraph</p>

Upvotes: 0

CoderPi
CoderPi

Reputation: 13211

You can add this to your tag:

<h1 style="display: inline;">HEADING</h1>
<p style="display: inline;">paragraph paragraph paragraph paragraph
 paragraph paragraph paragraph paragraph 
paragraph paragraph paragraph paragraph 
paragraph paragraph paragraph paragraph paragraph paragraph</p>

Upvotes: 0

Related Questions