CODEWITHSUNDEEP
htmlcss
user8759102
user8759102

Reputation:

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

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.

enter image description here

<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>

Upvotes: 0

Views: 761

Answers (1)

Snapstromegon
Snapstromegon

Reputation: 360

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.

Upvotes: 1

Related Questions