+ 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

13th Jan 2018, 4:10 AM
skubskii
skubskii - avatar
7 odpowiedzi
+ 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💻
💻Amey💻 - avatar
+ 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
Shehab Amr - avatar
+ 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
Shehab Amr - avatar
+ 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
Shehab Amr - avatar
+ 3
@Amey it works! Thanks
13th Jan 2018, 4:40 AM
skubskii
skubskii - avatar
+ 3
You're most welcome.. :) @ContemptArmy Contemptsy
13th Jan 2018, 4:42 AM
💻Amey💻
💻Amey💻 - avatar
+ 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
visph - avatar