problem when put text next to the photo using css (if the text is too long)-CodePudding

I am newbie with html css and here is my problem.

I code a very simple html and I want to put the image at the left, the text at the right. Here is my html code.

<div class="main_product">
    <div class="main_product-img" style="background-image: url('https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png');"></div>
    <div class="main_product-info text-left">
        <h1 class="main_product-name">
            Sữa Rửa Mặt Primer Advancer Ohui 250ml giúp da căng bóng, mướt mịn, sáng khỏe
        </h1>
        <h3 class="main_product-price">790,000₫</h3>
        <p class="main_product-desc">
            Bộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcsBộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcs có tác dụng chống lão hóa, chống nhăn, giúp da săn chắc căng bóng, mịn màng. Sản phẩm thẩm thấu sâu vào 3 lớp biểu bì, thân bì và hạ bì để nuôi
            dưỡng da từ gốc cho bạn một làn da khỏe và đẹp tự nhiên một cách bền vững, mang lại làn da trắng sáng
        </p>
    </div>
</div>

Here is my css code

.main_product-img {
height: 400px;
width: 400px;
background-size: contain;
position: absolute;
left: 0%;
}

.text-left {
text-align: left;
float: right;
}

And here is the page I got , as you can see in this picture, the text over the picture.

But, when I compact the text, here is what I got

As you can see, all the text come to the right next to the image, but not near the image as I want.

So, could you please help me how to make the to be next to the image ?

Thank you very much for your time.

CodePudding user response：

You can set float: left; to your img instead of float: right; to your text.

CodePudding user response：

<!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">
    <title>Document</title>
    <style>
        .main_product{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .main_product-img {
            height: 400px;
            width: 400px;
            position: relative;
            left: 0%;
            float: left;
        }
        .text-left {
            text-align: left;
            float: right;
        }
        .container {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
<div class="main_product">
    <img src="https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png" alt="">
    <div class="main_product-info text-left">
        <h1 class="main_product-name">
            Sữa Rửa Mặt Primer Advancer Ohui 250ml giúp da căng bóng, mướt mịn, sáng khỏe
        </h1>
        <h3 class="main_product-price">790,000₫</h3>
        <p class="main_product-desc">
            Bộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcsBộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcs
            có tác dụng chống lão hóa, chống nhăn, giúp da săn chắc căng bóng, mịn màng. Sản phẩm thẩm thấu sâu vào 3
            lớp biểu bì, thân bì và hạ bì để nuôi
            dưỡng da từ gốc cho bạn một làn da khỏe và đẹp tự nhiên một cách bền vững, mang lại làn da trắng sáng
        </p>
    </div>
</div>
</body>

</html>

Containers will save your butt in these situations, I made main_product a container, set it to flex, row, and look at the magic it did. :), Also I set the image into a tag so it doesnt get cut off

CodePudding user response：

Use this code and you can change image width to control size.. your HTML structure isn't correct

.main_product{
    display: flex;
    align-items: center;
}
.main_product-img{
    width: 40rem;
}

    <div class="main_product">
        <img class="main_product-img" src="https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png" title="" alt="">
        <div class="main_product-info">
            <h1 class="main_product-name">
                Sữa Rửa Mặt Primer Advancer Ohui 250ml giúp da căng bóng, mướt mịn, sáng khỏe
            </h1>
            <h3 class="main_product-price">790,000₫</h3>
            <p class="main_product-desc">
                Bộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcsBộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcs có tác dụng chống lão hóa, chống nhăn, giúp da săn chắc căng bóng, mịn màng. Sản phẩm thẩm thấu sâu vào 3 lớp biểu bì, thân bì và hạ bì để nuôi
                dưỡng da từ gốc cho bạn một làn da khỏe và đẹp tự nhiên một cách bền vững, mang lại làn da trắng sáng
            </p>
        </div>
    </div>