I need to place text next to image, and stack them from top to bottom

Question

I got a city landing page, below the main image I want to have one picture with float: right; and next to that is text. Below that, I want to have the same content but this time I used float: left; but the picture didn't position itself below the first one. They are in separate DIV-s with display: block;

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../style/main-style.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
        <title>Moskva</title>
    </head>
    <body>
        <!-- Header start -->
        <header>
            <div class="container">
                <h1>Moskva</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel interdum purus. Nulla semper nisi vel volutpat tristique.</p>
            </div>

            <div class="container">
                <nav>
                    <ul>
                        <li><a href="index.html">Naslovnica</a></li>
                        <li><a href="#">Galerija</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- Header end -->

        <!-- About city -->
        <section id="opis">
            <div class="container">
                <div class="box">
                    <h3>Lorem Ipsum</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel interdum purus. Nulla semper nisi vel volutpat tristique. Fusce eget quam sit amet dui consequat fermentum. Morbi dictum efficitur lorem a aliquam. Nam dapibus, lorem vel molestie tincidunt, urna ipsum vehicula sem, in vehicula dolor dui vel massa. Fusce a tortor est. Maecenas nec congue diam. Ut et ornare urna, id feugiat ex.Donec ac vehicula dolor, quis placerat arcu. Nam laoreet enim in varius tristique. Vestibulum feugiat sed nisl ac vestibulum. Cras quis pellentesque quam, eu sollicitudin enim. Curabitur massa elit, tempor vel leo in, laoreet placerat sem.
                    </p>
                </div>

                <hr>
                <!-- Image-Text sections -->

                <!-- Kremlin -->
                <div class="box">
                    <h3>Kremlin</h3>
                    <img src="../images/kremlin-pic.jpg" alt="kremlin" class="right-img">
                    <br> <br>
                    <p>Najprepoznatljivija struktura Moskve bez sumnje je Kremlj, utvrđeni kompleks iz 15. stoljeća koji pokriva površinu od 275.000 četvornih metara okružen zidinama izgrađenim 1400-ih. Palača Grand Kremlj - koja ima preko 700 soba - nekad je bila obitelj kralja i sada je službeno prebivalište predsjednika Ruske Federacije, iako većina šefova država odlučuje prebivati negdje drugdje.</p>
                </div>
                <!-- Kremlin End -->

                <!-- Bolshoi Theatre Start -->
                <div class="box">
                    <h3>Bolshoi Theatre</h3>
                    <img src="../images/bolshoi-theatre.jpg" class="left-img"> 
                </div>
                <!-- Bolshoi Theatre End -->
        </section>
    </body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5;
    background-color: #f4f4f4;
}

/* Global container */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    text-align: center;
}

.box {
    text-align: center;
    display: block;
}

/* Header section */
header {
    text-align: center;
    padding-top: 30px;
    background: url(../images/background.jpg) no-repeat;
    min-height: 690px;
}

header h1 {
    font-size: 95px;
    font-weight: bold;
    color: white;
    font-family: 'Dancing Script', cursive;
}

header p {
    color: white;
}

nav {
    margin-top: 4%;
}

/* Anchor tags section */
header a {
    color: white;
    text-decoration: none;
    font-size: 24px;
    transition: linear .2s;
}

header a:hover {
    color: #ccc;
    font-weight: bold;
}

/* Anchor tags section end */

header li {
    display: inline;
    padding: 0px 40px 0px 20px;
}

/* Header section END */

/* Image-Text section */
h3 {
    font-size: 28px;
    font-family: 'Dancing Script', cursive;
}

/* Image float - RL */
.right-img {
    float: right;
}

.left-img {
    float: left;
}

Ajay Chauhan · Answer 1 · 2020-03-20T09:35:43.547

First of all when you are using float so you need to add overflow hidden in Parent.

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

So you have to add overflow: hidden; CSS, please review below as I create an example for the same.

I add a link in comment for better understanding.

I need to place text next to image, and stack them from top to bottom

1 Answers1