Cant figure out how to get text next to my image


#1

Hi all! I am just practising a bit with css, but I am really stuck. Im trying to get the text “YOUR MIND” and its paragraph, next to the picture. But I just cant seem to figure out how to do it. This is my html for the section:

<div class=“section2”>

<h1>your mind</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, soluta qui labore repellat eveniet, esse ex at aliquid saepe officia necessitatibus incidunt eum, aspernatur voluptatum quibusdam ipsam asperiores perspiciatis.</p> <img id=“sadboi5” src=“https://i.pinimg.com/originals/ab/c4/33/abc43368a9569654869c09314e8546c1.jpg” alt=“sadboi”> </div>

and here is my css for the section:

#sadboi5 {

width: 40%;

height: 40%;

}

.section2 {

text-align: center;

padding-top: 40px;

padding-bottom: 40px;

background-color: lightgrey;

}

I hope somebody can explain to me how I can get the <p> next to the picture.


#2
<div class=“section2”>

<h1>your mind</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, soluta qui labore repellat eveniet, esse ex at aliquid saepe officia necessitatibus incidunt eum, aspernatur voluptatum quibusdam ipsam asperiores perspiciatis.</p> 
<img id=“sadboi5” src=“https://i.pinimg.com/originals/ab/c4/33/abc43368a9569654869c09314e8546c1.jpg” alt=“sadboi”> 
</div>

A simple approach is to use a float property on the image. It takes a little more structure to get it tightened up.

<div class="section2">    <!-- give this a `clear: both` property -->
  <h1>...</h1>
  <div>    <!-- give this element `position: relative` -->
    <img>  <!-- give this a `float: left` or `float: right` property -->
    <p>...</p>
  </div>
</div>

Put a margin on the float object, not on the P. If float: left, then margin on the right, and vice-versa for float: right. A lot has changed in the past few years, but way back when I always put the float object before the text object.

This is old school, though, now that we have Flexbox and CSS Grid (and optionally Twitter Bootstrap.css).