+ 1

<HTML> How do I put two paragraphs on the same line, one on the right and one on the left?

Basically what I mean is to have the text like this: ----------------- Home $: 0 ----------------- Except when I put 2 paragraphs they are both in different lines, making the "Home" part hover. How do I fix it so that both paragraphs are on the same line? Here is my code <hr> <p>Home</p> <p align="right">$: 0</p> <hr> Thanks

html html5

13th Jan 2018, 4:10 AM

skubskii

7 Answers

+ 2

Use only 1 'p' tag instead of 2: and add style attribute like shown below: <hr> <p> Home <span style="float : right;">$: 0 </span> </p> <hr>

13th Jan 2018, 4:31 AM

💻Amey💻

+ 8

@viship, okay you are right but programming has more than way to solve problem/error & anyone of us has his mind, so that's not good reason to dislike/downVote our answers to get more likes on yours. don't be bad person bro✋ have a good day❤

13th Jan 2018, 8:22 AM

Shehab Amr

+ 7

p tag by default it block tag, what i mean?! -p tag make break line before&after it, so you will need to use CSS to do this: <hr> <p style="display:inline;"> <span>Home</span> <span style="margin-left:230px;">$: 0</span> </p> <hr> good luck bro😉❤

13th Jan 2018, 7:23 AM

Shehab Amr

+ 7

https://code.sololearn.com/WbCwhZ8PijsE/?ref=app here you will get the answer😉 you can increase the number (margin-left) to be responsive with you screen.

13th Jan 2018, 7:28 AM

Shehab Amr

+ 3

@Amey it works! Thanks

13th Jan 2018, 4:40 AM

skubskii

+ 3

You're most welcome.. :) @ContemptArmy Contemptsy

13th Jan 2018, 4:42 AM

💻Amey💻

+ 2

Better way do to this, is to use <table> behaviour (without using the <table> semantical elements, as you need it for layout, not for table display ^^): <div style="display:table;"> <p style="display:table-cell;"> Home </p> <p style="display:table-cell;>$: 0</p> </div> <hr> ... This use old html and css stuff, so it would works in almost browsers context. However, there are also better ways today to achieve your goal with Flexbox (display:flex;) or Grid, but they are less widely supported (first one begin to be usable at production, but second one is still not enough supported ;))

13th Jan 2018, 8:15 AM

visph