Can't float a button to the right of its div?

Question

I am trying to make a basic product page in HTML and CSS. It features an image on the left with a title, description and price button on the right (separated as left-div and right-div in the css). Within the right div, after the product description, I am trying to put a price beneath it on the left with the buy button on the opposite right side of the right div. However, it keeps sticking next to the price. I have attached a photo below to demonstrate the problem, along with my html and css. Any help would be greatly appreciated.

<style>
    .left-div {
        padding: 5%;
        width: 40%;
        float: left;
    }
    .right-div {
        padding: 5%;
        width: 40%;
        float: right;
    }
    .price-bar {
        display: flex;
        width: 100%
    }
    .price-tag {
        float: left;
    }
    .buy-button {
        background-color: var(--colour-tone-highlight);
        border-radius: 25px;
        float: right;
    }
</style>

<div>
    <div class="left-div">
        <img src="images/product.jpg" alt="Product" style="width:100%">
    </div>
    <div class="right-div">
        <h1>Product</h1>
        <p>Product details here.</p>
        <div class="price-bar">
            <div class="price-tag">
                <p>£9.99</p>
            </div>
            <div class="buy-button">
                <p style="color:white">BUY NOW</p>
            </div>
        </div>
    </div>
</div>

If the parent is a `flex container`, floating the children won't do anything. You should use the flex properties, like `justify-content: space-between` on the container — Amaury Hanser, Apr 08 '19 at 18:01
If you want to read more about it, you could check the first answer : https://stackoverflow.com/questions/39194630/float-does-not-work-in-a-flex-container — Amaury Hanser, Apr 08 '19 at 18:04

score 1 · Answer 1 · answered Apr 08 '19 at 18:05

1

The Problem is your display: flex in .price-bar. This overwrites any floating.

Add the following under display: flex :

justify-content: space-between;

This will spread the elements of the flexbox.

answered Apr 08 '19 at 18:05

Snapstromegon

330
3
8

Can't float a button to the right of its div?

1 Answers1