[SOLVED] Cannot align image and text the way I want (Image on left, text on right)

HTML-CSS
1

Here is my ugly landing page so far:

What it looks like

I have been trying everything I can think of to get the h3 element and the p element near the middle of the page to be on the right and the image of the pile of veggies on the left. But nothing is working. My HTML and CSS are below.

Here’s an example of what I’m trying to do (looked at this site’s CSS but not sure how to translate it to my page)

What I want it to look like

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yoda's Kitchen Cat Treats</title>
    <link rel="stylesheet" href="Landing-Page.css">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>
<body>
    <header id="header">
        <img id="header-img" src="https://lh3.googleusercontent.com/sD--gRzg2awxuBGm9Bprz2RkJCNv_tPFdR2nlMHKAT2ba4rPw0ejnd36nMp5gIT6hLMl2ix4fpin-D7bX_I-6XFMZrKRHvvK4ADWG82Xchf1yOM86ye7w52TRmUUgP2UBZYf7Oy_aQ=w2400">
        <h1>The best snacks ever!</h1>
        <nav id="nav-bar">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Product</a></li>
                <li><a href="">About</a></li>
            </ul>
        </nav>
    </header>
    <div id="veggies" class="container">
        <h3>Yoda's Kitchen uses only the freshest vegetables!</h3>
        <p>Yoda has been in the kitchen for 6 months cooking up the best cat treats. He uses produce straight from the local
            farmer's market for his tasty cat creations!</p>
        <img src="https://lh3.googleusercontent.com/GeVok0uVEL6A1Dw9OhqnaSZ7AvrIftHtyu6Cy3bjrbmq8PzujENzDqvTLS0U0He5Y-imaRwazEPHRb83LKCsWURD0sJ7pKFS1Ka0b8sDNmz1iUpoUJj6JoJ9FNIicb6jyUKVSrfA=w2400">
    </div>

</body>
</html>

CSS

body {
    font-family: 'Nunito', sans-serif;
    width: 50%;
    margin: auto;
    display: block;
}

#veggies img {
    width: 40%;
    height: auto;
    float: left;
}

#veggies h3 p {
    float: left;
    width: 20%;
    height: auto;
}
2

You can use flexbox. Use display: flex on your #veggies div. Have you used flexbox before?

1 Like
3

This will be my first time using flexbox, but I do remember a tutorial about it (vaguely). But at least I know what to look for to get more information now. Thank you!

1 Like