Move Floated Area Inside Paragraph

Move floated area inside paragraph

This can be achieved using shape-outside combined with float. More examples here: https://dev.to/afif/float-to-the-bottom-corners-i8l

.wrapperSingleProject {
  width: 400px;
  margin: 0 auto;
}

p {
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.45;
}
.quote-div {
  float: left;
  padding-top:200px; /*Distance from top*/
  margin-right:10px;
  /* A rectangular shape offseted by 200px from the top*/
  shape-outside: polygon(0 200px,100% 200px, 100% 100%,0 100%);
}
.quote-div p {
  position: relative;
  text-align: center;
  width: 200px;
  color: blue;
  background-color: #ccc;
  margin:0;
  padding:5px;
  margin-left:-100px;
}

<div class="wrapperSingleProject">
  <div class="quote-div">
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
  </div>

  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
    et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    </p>
</div>

Move a floated box down one line

shape-outside can do this:

.note {
  float: right;
  margin: 0 0.5em;
  padding-top:1.1em; /* padding equal (or slightly smaller) to one line */
  shape-outside:inset(1.2em 0 0 0); /* this will do the magic */
}

p {
  line-height:1.2em; /* height of a line */
}

<p>
<span class="note">29 July, 1814.</span>
Exhausted with sickness and fatigue, I walked over the sands with my companions to the hotel. I heard for the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; the first time the confused buzz of voices speaking a different language from that to which I had been accustomed; first time the confused buzz of voices speaking a different language from that to which I had been accustomed;</p>

floating elements inside a paragraph

If you set a width on the span (just use 100% for this case) it will work as you want.

p {
  ...
  width: 100%; /* This is the change you need */
  ...
}

html,body {  height: 100%;  margin: 0;  padding: 0;}body {  background: lightblue;  background-size: 100%;}article {  position: absolute;  width: 32%;  height: 100%;  left: 50%;  transform: translate(-50%, 0);  background: url(../Images_Albums/Background2.jpg) no-repeat;  background-size: 100%;}
#container {  margin-top: 9%;  position: relative;  width: 43.5%;  left: 50%;  transform: translate(-50%, 0);}
p {  color: black;  font-family: QuaestorSans;  float: left;  margin-left: 2%;  font-size: .8em;  clear: left;  line-height: 1;  width: 100%; /* This is the change you need */}span {  color: purple;  font-family: Dingbats;  float: right;  margin-right: 2%;  line-height: 1;}

<article>  <div id="container">    <p>01 Song 1 <span>c</span></p>
    <p>03 Song 2 <span>c</span></p>
    <p>01 Song 3 <span>c</span></p>
    <p>03 Song 4 <span>c</span></p>
  </div></article>

How to position container inside p element w/ text flowing around it?

A very simple solution with just negative margin-left on the quote-div.

.wrapperSingleProject {  padding: 80px 0 80px 0;  width: 400px; /* made the wrapper div smaller so can see the space on the left side here in the snippet display */  margin: 0 auto; /* centers the wrapper div on the page */  position: relative;}
p {  text-decoration: none;  text-align: left;  font-size: 17px;  font-family: 'Roboto', sans-serif;  font-weight: 400;  letter-spacing: 0.08em;  line-height: 1.45;  color: black;}
.quote-div {  position: relative;  width: 200px;  margin-left: -100px;  float: left;}
.quote-div p {  margin: 0;  padding: 10px;  background-color: #eee;  text-align: center;  color: blue;}

<div class="wrapperSingleProject">  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</p>
  <div class="relativeposition">    <div class="quote-div">      <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore      et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr,      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem      ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  </div></div>

How to float paragraph next to image without wrapping the image?

You can do it with some JavaScript:

document.getElementById('content').style.width = (    document.getElementById('wrapper').offsetWidth -    document.getElementById('logoimg').offsetWidth - 10) + "px";

#logoimg { float: left; }#content { float: left; padding-left: 5px; margin:0; }.clearer { clear: both; }

<div id="wrapper"><img id="logoimg" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />    <div id="content">A Fehér Kéményseprőket is bevonta a Fidesz a bajban lévő hitelesek megsegítéséről szóló törvényjavaslat kidolgozásába. A Rogán Antal és Kósa Lajos által bejelentett törvénycsomagról konkrétumokat továbbra sem tudni, a politikusok az egyeztetések lezártával ígérik nyilvánosságra hozni az összefésült javaslatokat. A tárgyalásba bevont, magát civil egyesületként definiáló Fehér Kéményseprők szervezet a radikális jobb- és baloldalon is igen népszerű, rendezvényein az Antifasiszta Liga és a kommunisták mellett gárdisták is felbukkannak. A Fidesz szerint a kéményseprők jól ismerik az érintettek problémáit. Az asztalnál ülő egy másik szervezet annyira jól ismeri a problémákat, hogy megoldásként javasolja: az elmúlt években elszenvedett árfolyamveszteséget a bankok "adják vissza" a hiteleseknek.</div>    <div class="clearer"></div></div>

float:left paragraph followed by float:none paragraph

The first paragraph is taken out of the flow by being floated, while the second paragraph remains in flow, so the box of the second paragraph is positioned as though the first paragraph were not there.

However, the text in the second paragraph is pushed down by the first paragraph so that it remains visible. The technical reason for this is that the text is inline content, which flows along a set of line boxes. From the spec:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

[...]

If a shortened line box is too small to contain any content, then the line box is shifted downward (and its width recomputed) until either some content fits or there are no more floats present.

Since the text is pushed down, this causes the boundaries of the second paragraph box to extend downwards as well, to accommodate the new position of the text.

As mentioned in other answers, this behavior is typically prevented by clearing the float:

<p style="float:left; border:red solid 1px;">  first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph. first paragraph.</p>
<p style="clear:both; float:none; border:green solid 1px;">  second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph. second paragraph.</p>

Position aside part way up in paragraph with CSS

I have a solution that works , but only if the aside size is known/fixed.

I have solved that making it scroll.

CSS

aside {
    position: absolute;
    top: 170px;
    right: 0px;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid black;
    width: 20em;
    height: 139px;
    padding: 1em;
    overflow: scroll;
}

h1:before {
    content: "";
    width: 2px;
    height: 150px;
    float: right;
    background-color: green;    
}

.firstp:before {
    content: "";
    width: 22em;
    height: 160px;
    float: right;
    clear: right;
    background-color: yellow;    
}

fiddle

I have set a class in the first p, firstp

Then, I need an floated right element before the p content, so that it flows ok. I use for this a pseudo element before on this class. This will be empty, and will be used only to reserve space for the aside element. The problem here is that I have to know the size of the aside, that I don't know. I have given this element yellow background, so that you can see easily what is happening.

To be able to position this where i want, I set another pseudo element on the h3. Setting this element height, and clearing the previous one, I can set the top position of it.

Finally, I set the aside with position absolute, in the space that is reserved.

Why does my div move down when I add paragraph?

The <p> tag has margins by default. So try resetting them:

p {margin: 0;}
.titleheader {overflow: hidden;}

Working Output: http://jsbin.com/zohapoyivi/1/edit?html,output

How to put one paragraph below other with float right?

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>

---

Related Topics