Text floating left and image on the right

Question

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!

Rana · Accepted Answer · 2021-10-25T12:42:25.983

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>

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>

Put some `width` and `height` property on `img` like in snippet above so that it span only certain area @WaffleBoots — Rana, Oct 25 '21 at 11:43
You can define that using some `class` or on `img` tag . I will update the answer so you can see of what I am talking about — Rana, Oct 25 '21 at 12:17
I can't help further @WaffleBoots until you provide some code which make the same display as you are sharing image — Rana, Oct 25 '21 at 12:28
Now update the answer @WaffleBoots . See if it solves your problem . You can mark it as accepted answer if find this helpful. — Rana, Oct 25 '21 at 12:44
Thank you so much Rana! Just one more thing, is it possible to move the image more to the left to give the text block space? Thank you once again! — Waffle Boots, Oct 25 '21 at 14:14
Yup you can give `width` like 60% for text and 40% for image @WaffleBoots — Rana, Oct 25 '21 at 14:27

score 1 · Answer 2 · answered Oct 25 '21 at 11:38

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>

Comes out as the same result as this: https://ibb.co/4MGbH1Z — Waffle Boots, Oct 25 '21 at 11:44
@WaffleBoots You than need to specifiy the width you want to use for the text. — Gerard, Oct 25 '21 at 11:46

score 0 · Answer 3 · answered Oct 25 '21 at 11:30

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>

Haroon Ahmad · Answer 4 · 2021-10-25T11:37:27.387

-1

<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
 }

edited Oct 25 '21 at 11:37

answered Oct 25 '21 at 11:29

Haroon Ahmad

49
4

1

Thank you for your contribution, however where is the relevant CSS code you mention? – avia Oct 25 '21 at 11:31
1

my bad, Just added it. – Haroon Ahmad Oct 25 '21 at 11:37

Text floating left and image on the right

4 Answers4

Update: