CODEWITHSUNDEEP
htmlcss
LOL Jovem
LOL Jovem

Reputation: 207

How to put one paragraph below other with float right?

I'm trying to put all my elements to the right side of the page using float: right and the only issue that I'm having is the position of the last paragraph, instead of just being below of top paragraph it goes below and moves to the left.

Here you have a JSFiddle to a better understand of my issue. https://jsfiddle.net/5782o1hg/1/

<div style="height: 100%">
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
    <p style="font-size: 20px; float: right; margin: 2px 0 0 0">DreamGlass</p>
    <br/>
    <p style="font-size: 20px; float: right">Ola</p>
</div>

I just want to put the "World" paragraph bellow of the top one without moving to the left.

Upvotes: 1

Views: 1360

Answers (7)

inputforcolor
inputforcolor

Reputation: 919

Wrap the two paragraphs into a div with style = "float: right;"

Replace <p> tags with <span> and adjust styles in both as needed

<div style="height: 100%">
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
    <div style="float: right;">
        <span style="font-size: 20px; margin: 2px 0 0 0">DreamGlass</span>
        <br />
        <span style="font-size: 20px; float: right; margin: 2px 4px 0 0">Ola</span>
    </div>
</div>

Upvotes: 1

era-net
era-net

Reputation: 387

CSS grid solution:

.grid {
  position: absolute;
  right: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.items {
  justify-self: right;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS grid</title>
</head>
<body>
  <div class="grid">
    <div class="items item-1">DreamGlass</div>
    <div class="items item-2">kiwi.svg</div>
    <div class="items item-3">Ola</div>
    <div class="items item-4">kiwi.svg</div>
  </div>
</body>
</html>

text-align right solution

.p {
  text-align: right;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>text-align right solution</title>
</head>
<body>
  <div class="wrapper">
    <p class="p">paragraph-1</p>
    <p class="p">paragraph-2</p>
  </div>
</body>
</html>

Upvotes: 1

Binu
Binu

Reputation: 72

Better you can use flexbox instead of float

<div style="height: 100%; display: flex; flex-direction: column; align-items: flex-end;">
  <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50"/>
  <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50"/>
  <p style="font-size: 20px; margin: 2px 0 0 0">DreamGlass</p>
  <p style="font-size: 20px;">Ola</p>
</div>

Still not want to use flexbox then just making some changes on your code will do this for you. Remove float and add style "text-align: right;" to the parent. Also add a line break after image

<div style="height: 100%; text-align: right;">
  <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" /><br>
  <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="margin: 0 0 0 15px"/><br>
  <p style="font-size: 20px; margin: 2px 0 0 0">DreamGlass</p>
  <p style="font-size: 20px;">Ola</p>
</div>

Upvotes: 0

hbrovell
hbrovell

Reputation: 547

You could add a negative margin-right to the world paragraph. 

<div style="height: 100%">
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
    <p style="font-size: 20px; float: right; margin: 2px 0 0 0">Hello</p>
    <br/>
    <p style="font-size: 20px; float: right; margin-right: -50px">World</p>
</div>

Upvotes: 1

hisbvdis
hisbvdis

Reputation: 1380

You can create "wrapper" <div> and put in your paragraphes

Result on JSFiddle

<div style="height: 100%">
  <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right" />
  <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px" />
  <div style="float:right;">
    <p style="font-size: 20px; float: right; margin: 2px 0 0 0">DreamGlass</p>
    <br/>
    <p style="font-size: 20px; float: right">Ola</p>
  </div>
</div>

Upvotes: 1

fdurna
fdurna

Reputation: 328

<div style="height: 100%;">
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
    <p style="font-size: 20px; float: right; margin: 2px 0 0 0;width:100%;text-align:right;">Hello</p>
    <p style="font-size: 20px; float: right;width:100%;text-align:right;">World</p>
</div>

thats all...

Upvotes: 1

o1dskoo1
o1dskoo1

Reputation: 409

The easiest way is put 'World' into the 'Hello' paragraph adding a line break between both words: 

<div style="height: 100%">
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right"/>
    <img src="https://s.cdpn.io/3/kiwi.svg" width="50" height="50" style="float: right; margin: 0 0 0 15px"/>
    <p style="font-size: 20px; float: right; margin: 2px 0 0 0">Hello<br /> World</p>
</div>

Upvotes: 2

Related Questions