Image

As you can see in image, I'd like the image to be positioned to the right of the text block. I have read this post, except my code is different.

<section>               
   <img src="images/default-image.png" />
   <h2>Lorem Ipsum</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
 </section>

In that answer, thirtydot's is using div's, and when I try thirtydot's code, the page looks like a horrible mess.

How do I solve this? Thank you!

CodePudding user response：

Use display: flex property on section and put h2 p tags in a separate tag . Also just put the img element below the h2 p element as shown in snippet .

You can read here for more about display: flex

section {
  display: flex
}
.imgTag{
width:50vw;
height:50vh
}

<section class="post-container">
  <span>
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
    mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</span>

  <img src="https://pixy.org/src/477/4774988.jpg" class="imgTag" />
</section>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Update:

As user need some help within his code
Use some breathing area for text if you want image to be big like increasing width of section here done (1000px) . Also to center it use display: block with margin: auto

@import url("https://fonts.googleapis.com/css2?family=Yomogi&family=Zen Kaku Gothic New:wght@300;400;500&display=swap");
:root {
  --white: #fff;
  --dark-grey: #2f3c4f;
  --green: #23966c;
  --yellow: #faaa54;
}

body {
  background-color: var(--dark-grey);
  color: var(--white);
}

h2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* font-size: 40px; */
  color: var(--yellow);
}

p {
  font-family: "Yomogi", sans-serif;
  /* font-size: 30px; */
  color: white;
}

section {
  display: block;
  margin: auto;
  width: 1000px;
  display: flex;
}

.imgTag {
  width: 50vw;
  height: 50vh;
}

<section>
  <span>
        <h2 style="font-size:40px">Lorem Ipsum</h2>
        <p style="font-size:30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
          mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
      </span>

  <img src="https://pixy.org/src/477/4774988.jpg" class="imgTag" />
</section>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Using a grid is an option. You can read more about it here

.post-container {
  display: grid;
  grid-template-areas: 
      "header image" 
      "paragraph image";
}

.post-container>h2 {
  grid-area: header;
}

.post-container>p {
  grid-area: paragraph;
}

.post-container>img {
  grid-area: image;
}

<section class="post-container">
  <img src="https://via.placeholder.com/150" />
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
    mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</section>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Using flex display.

If you need the image to be on the left of the flex container, then you can use row for the value of the flex-direction property for the section selector.

section, div {
  display:flex;
  flex-direction:row-reverse;
  margin:20px;
  }

div {
flex-direction:column;
}
  

<section class="post-container">               
   <img src="https://picsum.photos/200/300" />
   <div>
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
      </div>
 </section>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

<section class="post-container">               
<div>
<h2>Lorem Ipsum</h2>
<p> Lorem Ipsum... </p>
</div>

<div>
<img src="images/default-image.png" />
</div>
</section>

Adding a flex display to post-container should fix the problem. If not you'd have to manually position the image in CSS file. Not sure if that's a good practice.

.post-container {
 display: flex
 }