How to put image right beside div element on webpage? - html

Question

I'm having a hard time figuring out how to put my image right beside my paragraph. The goal is to set an image beside my text, not super close but on the same line. How can I do this in css? Below is my About.js and About.css. My paragraph is wrapped in a div called about-page. I tried taking my img tag outside that div but it causes an error. It's suppose to look like this sketch below.
import React from 'react'
import '../CSS/About.css'
import clock from '../clock.jpg'
const About = () => {
return (
<div className="about-page">
<h6 className="about-this-app-header">About This Application</h6>
<p className="description">
Do You Have A Habit of Forgetting Stuff? Don't Worry!!!
<br />
Here's <b>Reminder Me</b> to The Rescue.
</p>
<p className="description">
<b>Reminder Me</b> is a reminder management application
<br />
that lets you send reminders through text message.
<br />
It lets you set a time/duration and a message for your
<br />
reminder. And makes sure that it's sending out right on
<br />
time, not letting you or your friends miss out on the
<br />
important things in life.
</p>
<h6 className="tech-stack-header">Tech Stack</h6>
<h6 className="tech-stack">Front-End: <p className="tech">React, Materialize UI, Font Awesome</p></h6>
<h6 className="tech-stack">
Back-End: <p className="tech">Express.js, Firebase, Node.js, Twilio API</p>
</h6>
<h6 className="link-to">
Link to:
<a
href="https://github.com/jspades93?tab=repositories"
target="_blank"
rel="noopener noreferrer"
className="waves-effect waves-light btn-flat"
>
<i className="fa fa-github" style={{ fontSize: "36px" }}></i>
</a>
</h6>
<div className="clock-image"><img src={clock} alt="clock" /></div>
</div>
);
};
export default About
h6 {
font-weight: bold;
color: #056674;
}
.btn-flat {
color: black;
}
.about-this-app-header {
margin-top: 100px;
margin-left: 170px;
}
.description {
margin-top: 20px;
margin-left: 90px;
}
.tech-stack-header{
margin-top: 25px;
margin-left: 210px;
}
.tech-stack {
margin-left: 90px;
}
.link-to {
margin-left: 35px;
margin-top: 20px;
}
img {
width: 390px;
height: 250px;
float: right;
}
.tech {
display: inline;
vertical-align: top;
color: black;
font-weight: normal;
}

Answer 1

I wouldn't advice using CSS floats, you can use flex box but this way of work adds more divs to the DOM only to set the locations as needed.
I'd recommend using CSS grid, less DOM nodes required, less messy CSS. You can read all about it here. You have a more details expiation here or here.
Basically you would want to set a grid for the container and set the header, the left and right parts.
Something like so
.about-page {
display: grid;
grid-template-areas:
'header header'
'description image';
grid-gap: 10px;
}
.clock-image { grid-area: image; }
.header { grid-area: header; }
.about { grid-area: description; }

Answer 2

You should use floats like this example:
use float: left; for your text and use float: right; for your image.
.left {
float:left;
}
.right {
float:right;
}
figure img {
margin:10px;
width: 50%;
}
figcaption {
font-family:sans-serif;
font-weight:bold;
font-size:16px;
padding:10px;
}
.clear {
clear:both;
}
.centered {
margin: auto; /* margin:auto centers the figure element */
width: 50%;
background:#ccc;
text-align:center; /* text-align centers the text and image only - you need margin:auto to center the entire figure */
}
<figure> <img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT" class="left">
<figcaption> This is the caption for a left-floated photo. This element's width is has not been set and it will run the full width of the page. This is the caption for a left-floated photo. This element's width is has not been set and it will run the full width
of the page. </figcaption>
</figure>
<div class="clear"></div>
<figure> <img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT" class="right">
<figcaption> This is the caption for a right-floated photo. This div in between figures with the clear:both property clears the float from the div above it, so the next div can have a different or no float. </figcaption>
</figure>
<div class="clear"></div>
<figure class="centered"><img src="https://c1.staticflickr.com/9/8597/29295139165_94394aba37_z.jpg" width="640" height="427" alt="A_Dog Day 2016 at Andy Memorial Skate Park in Burlington, VT">
<figcaption class="centered-text"> Tip: margin:auto ONLY works if the width property is set, and not set to 100%, so the margins can push the less-than-full-width element into the middle. </figcaption>
</figure>
</div>