Make image align with paragraph text in padding-CodePudding

This is what it looks like, and the arrow kind of shows where I wish for the image to be.

my html code

   <section >
        <h1 ><b>Husk dit helbred!</b></h1> 
        <p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p> 
    <img src="images/emilybillede.jpg" alt="">

my css code

.underline {
    text-decoration: underline;
}

    .box2 img{
      position: right;
    width: 200px;
    height: 200px;
  }

    .box2 {
      margin: 0 auto;
      margin-right: 20%;
      margin-left: 20%;
        margin-top: 20px;
        background-color: rgb(255, 255, 255);
        padding: 15px;
        height: 50%;
      
    }

    p {
      width: 300px;
    }

I tried float as well but that takes it out of the padding. I also tried vertical align

CodePudding user response：

You could achieve it in several ways, using float, flex or position for example. Here an example with float

.underline {
  text-decoration: underline;
  clear: both;
}

.box2 img {
  float: right;
}

.box2 {
  width: 100%;
}

p {
  width: 300px;
  float: left;
}

<section >
  <h1 ><b>Husk dit helbred!</b></h1>
  <p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
    og lykke med jeres mange fremtide projekter!</p>
  <img src="https://www.filterforge.com/more/help/images/size200.jpg" alt="">
</section>

CodePudding user response：

With floats the document order must be reversed. If you don't like that, consider using flexbox instead, with the paragraph and the image being children in a flex row.

Here are both options demonstrated.

.underline {
  text-decoration: underline;
}

.box2 img {
  width: 200px;
  height: 200px;
  margin-left: 10px;
}

img.float-right {
  float: right;
}

.box2 {
  margin: 0 auto;
  margin-right: 20%;
  margin-left: 20%;
  margin-top: 20px;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  height: 50%;
}

p.sized {
  width: 300px;
}

.flex-row {
  display: flex;
}

.flex-row p:first-child {
  margin-top: 0;
}

<section >
  <h1 ><b>Husk dit helbred!</b></h1>

  <img src="https://via.placeholder.com/200" alt="" >

  <p >Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
    og lykke med jeres mange fremtide projekter!</p>
</section>

<section >
  <h1 ><b>Husk dit helbred!</b></h1>

  <div >
    <p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig,
      held og lykke med jeres mange fremtide projekter!</p>

    <img src="https://via.placeholder.com/200" alt="">
  </div>
</section>

CodePudding user response：

You can use the (flexbox) on the parent of the childrens then use (justify-content: space between), like the example below:

.underline {
  text-decoration: underline;
}

.box2 img {
  position: right;
  width: 200px;
  height: 200px;
}

.box2 {
  margin: 0 auto;
  margin-right: 20%;
  margin-left: 20%;
  margin-top: 20px;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  height: 50%;
  display:flex;
  justify-content: space-between;
}

p {
  width: 300px;
}

<section >
  <div>
  <h1 ><b>Husk dit helbred!</b></h1>

  <p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
    og lykke med jeres mange fremtide projekter!</p>
  </div>

  <img src="https://via.placeholder.com/200" alt="">
</section>

CodePudding user response：

Use float, not position. Use this CSS. I hope it will help you.

 .underline {
  text-decoration: underline;
}

.box2 img {
  float: right;
  width: 200px;
  height: 200px;
}

.box2 {
  margin: 0 auto;
  margin-right: 20%;
  margin-left: 20%;
  margin-top: 20px;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  height: 50%;
}

p {
  width: 300px;
  float: left;
}

CodePudding user response：

.underline {
  text-decoration: underline;
  grid-column: 1/3;
  grid-row: 1/2;
}

.box2 img {
  width: 200px;
  height: 200px;
  grid-column: 2/3;
  grid-row: 2/3;
}

.box2 {
  margin: 20px 20%;
  background-color: rgb(255, 255, 255);
  padding: 15px;
  display: grid;
  grid-template-columns: min(1fr, 300px) 1fr;
  grid-template-rows: min-content min-content;
  gap: 15px;
  box-shadow: 0 0 100px rgba(0, 0, 0, .1);
}

p {
  text-indent: 2em;
  margin: 0;
  grid-column: 1/2;
  grid-row: 2/3;
}

<section >
  <h1 ><b>Husk dit helbred!</b></h1>

  <p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held
    og lykke med jeres mange fremtide projekter!</p>

  <img src="https://via.placeholder.com/100" alt="">
</section>

CodePudding user response：

All I had to do was move my img above the p, example:

so instead of this:

        <h1 ><b>Husk dit helbred!</b></h1> 
        <p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p> 
    <img src="images/emilybillede.jpg" alt="">

It had to look like this:

            <h1 ><b>Husk dit helbred!</b></h1> 
<img src="images/emilybillede.jpg" alt="">
            <p>Projekt arbejde er vigtigt, men ikke lige så vigtigt som dit helbred! Husk at drikke vand, at spise noget og at tage en masse pauser. Du bliver mere produktiv, hvis du skaber et sundt forhold til dit studie arbejde og helbred. Det var alt fra mig, held og lykke med jeres mange fremtide projekter!</p>