Need help getting image to place correctly

joshscoville86868854 · May 26, 2022, 2:34pm

ag4sm/My-Favorite-Recipes/blob/a3f98aae9a89b129b5a469c0325bfe899b4051bc/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>My Favorite Recipes</title>
</head>
<body>
    <header>
        <div id="header-title">
            <h1>My Favorite Recipes</h1>
        </div>
    </header>
    <main>
        <article>
            <h2>Mexican Chicken Skillet</h2>
            <h3>Ingredients</h3>
                <img src="./images/skillet.jpg" alt="lovely image of mexican chicken skillet meal" />

This file has been truncated. show original

I am trying to get this image to right align to the container with the text neatly on the left side, but I’m having trouble getting the text to wrap properly. Any help is greatly appreciated.

jibs · May 26, 2022, 3:19pm

Here we could use float: right on the img to get it to go far to the right and have the text effectively ignore it.

The only issue would be that it then has to be offset slightly from the edge with a margin so that it’s not touching the border.

No float

float: right

float: right and margin: 20px

Of course, you can then mess around with the size, shape etc. to get it looking as you want it.

joshscoville86868854 · May 26, 2022, 4:22pm

That’s what I was forgetting, float. Thank you!