Question 359042 in CSS Question posted in
Some basic documentation can be found here.

Css – Align element containers with Flexbox

/* Universal selector */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    font-family: sans-serif;
    line-height: 1.4;
}

h1 {
    text-align: center;
}

h2,
h3 {
    text-align: left;
}

/* h2,
h3,
a,
ul,
li,
p {
    margin-left: 52px;
} */

/* Product */
.product {
    border: 5px solid black;
    width: 1350px;
    margin: 75px auto;
    position: relative;
}

.product-title {
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: rgba(88, 88, 88, 0.564);
    padding: 25px;
}

.img-container {
    display: flex;
    justify-self: flex-start;
    margin-bottom: 0;
}


/* Price and Shipping */
.price {
    font-size: 22px;
    /* margin-left: 71px; */
    margin-bottom: 15px;
}

.price-adjust {
    font-size: 28px;
}

.shipping {
    font-size: 14px;
    color: rgb(188, 188, 188);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
    /* margin-left: -10px */
}

/* SALE COMPONENT */
.sale {
    background-color: rgb(214, 24, 24);
    color: white;
    border-radius: 5px;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    padding: 10px 18px;
    display: inline-block;
    position: absolute;
    top: -25px;
    left: -104px;
}

.sale {
    animation: wobble 1.5s ease-in-out 2;
    transform-origin: center top;
    transition: padding .1s;
    cursor: pointer;
}


@keyframes wobble {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(-3deg);
    }

    75% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* MORE INFORMATION */

.more-info {
    color: black;
    font-size: 15px;
    display: inline-block;
}

.info-margin {
    margin-bottom: 60px;
}

.more-info:link {
    color: black;
    text-decoration: none;
    display: inline-block;
}

.more-info:hover,
.more-info:active {
    color: rgb(0, 0, 0);
    text-decoration: underline;
    transition: transform 0.1s;
    transform: scale(1.2);
}


/* FEATURES */

.features-title {
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 15px;
}

.features-list {
    font-size: 18px;
    list-style: square;
    /* margin-left: 94px; */
}

.features-list li {
    margin-bottom: 5px;
}

.features-list li:last-child {
    margin-bottom: 20px;
}

/* COLOR OPTIONS */

.color-div {
    margin-left: 52px;
    margin-bottom: 28px;
    /* display: inline-block; */
}

.colors {
    height: 30px;
    width: 30px;
    filter: blur;
    border-radius: 50px;
    margin-right: 10px;
    display: inline-block;
}

.natural-leather {
    background-color: rgb(77, 51, 26)
}

.smokey-brown {
    background-color: rgb(65, 55, 45);
}

.forest-green {
    background-color: rgb(33, 54, 18);
}

.deep-blue {
    background-color: rgb(3, 40, 67);
}

.sand {
    background-color: rgb(164, 158, 141);
}

.ashe {
    background-color: rgb(79, 79, 79);
}

.colors:hover {
    transform: scale(2);
    box-shadow: 0 0 0 2px rgba(165, 165, 165, 0.464);
    transition: transform 0.2s;
    transform: scale(1.8);
    cursor: pointer;
}


/*  BUTTON  */

.add-cart {
    font-size: 20px;
    border: 0px solid;
    color: rgb(253, 253, 253);
    background-color: rgb(0, 0, 0);
    width: 100%;
    padding: 20px;
    cursor: pointer;
    letter-spacing: 1px;
}

.add-cart:hover {
    border-top: 4px solid black;
    color: rgb(0, 0, 0);
    font-size: 21px;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    transition: transform 0.2s;
}

.add-cart:active {
    color: rgb(0, 0, 0);
    font-size: 21px;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
}


/* FLOATS */

/* .img-container {
    float: left;
} */

/* .price-container {
    width: 615px;
    padding-right: 50px;
    float: right;
} */

/* .features-container {
    width: 615px;
    padding-right: 50px;
    float: right;
} */

/* alignment fix */
/* .shipping {
    float: right;
    margin-left: -10px;
    padding-right: 140px;
} */

/* .more-info {
    float: left;
} */




/* FLEXBOX */

.item-details-wrapper,
.features-container {
    display: block;
    width: auto;
    width: 350px;
    /* flex: 1; */
}

.details-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Men's Captain Cognac Boots</title>
    <link rel="stylesheet" href="/assets/css/style.css" />
  </head>
  <body>
    <article class="product">
      <!-- Product Title -->
      <header>
        <h1 class="product-title">Men's Special Edition Cognac Boots</h1>
      </header>
      <!-- original image dimensions are 672x672 -->
      <!-- SALE TAG TOP -->
      <p class="sale">Sale</p>

      <img
        src="/assets/img/01-menCaptainSpecialEditionCognac.png"
        alt="Shot of Brown leather boots"
        class="img-container"
        width="472"
        height="472" />
      <div class="details-wrapper">
        <div class="item-details-wrapper">
          <div class="price-container">
            <div class="product-flex">
              <p class="price">
                <strong class="price-adjust">$199</strong> or 4 interest free
                payments with Klarna♞
              </p>

              <p class="shipping">Free Shipping & Returns</p>
            </div>

            <div class="info-margin">
              <a
                class="more-info"
                href="https://thursdayboots.com/products/mens-captain-lace-up-boot-cognac?utm_source=bing&utm_medium=cse&utm_term=32582249644122&msclkid=94237b7509301dea36be1ee615806382&utm_campaign=CPCS%20-%20Branded%20-%20Desktop%20-%20Men%27s%20Captain&utm_content=Tobacco">
                More Information &rarr;
              </a>
            </div>
          </div>

          <div class="color-div el--color">
            <div class="colors natural-leather"></div>
            <div class="colors smokey-brown"></div>
            <div class="colors forest-green"></div>
            <div class="colors deep-blue"></div>
            <div class="colors sand"></div>
            <div class="colors ashe"></div>
          </div>
        </div>
        <!-- FLEXBOX FEATURES -->
        <!-- Product Features -->

        <div class="features-container">
          <h2 class="features-title">Product Features</h2>

          <ul class="features-list">
            <li>Limited Edition Two-Toned Hand Finished Leather</li>
            <li>Dark Anejo (Body) And Cacao (Counter, Cap Toe) Leather</li>
            <li>
              Two-Toned effect is minimal in low light, <br />
              with an eye-catching look in bright light
            </li>
            <li>Goodyear Welt Construction for longevity</li>
            <li>Premium flat waxed cotton laces</li>
            <li>Poron® Antimicrobial Shock Absorbing Insoles</li>
            <li>Cork-Bed Midsoles that Form to Your Feet</li>
            <li>Hardwearing Steel Shanks Durable Studded Rubber</li>
            <li>Outsoles Handcrafted With Integrity</li>
          </ul>
        </div>
      </div>

      <button class="add-cart">ADD TO CART</button>
    </article>
  </body>
</html>

I am trying to align to containers to the right of an image, these containers have multiple elements in them (text and color swatches). The issue I am running into is that the elements are staying bellow the image which is top left of the main space. The project is to create a tab containing an image of a product, with price details, shipping, and product info. I am using flexbox to align the elements in a row. I am not using a grid.

Attached is an image of the highlighted area I want the content to appear.

.item-details-wrapper,
.features-container {
   display: block;
   width: auto;
   width: 350px;
/* flex: 1; */
}

.details-wrapper {
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;

}

This is what I have so far, I tried to change all sorts of flex setting but nothing is working.
I have the fixed width because I was thinking the content was taking up to much width and would not move up dynamically, but even with width: auto; not working.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was entirely overcomplicating my code, thank you Amenawon Esezobor, I was getting carried away with the divs! I removed most of them and wrapped my three containers, then cleaned up my CSS. Thank you!


  2. 0

    Without seeing the structure of your HTML code, you need to ensure the flexbox container is correctly wrapping around all the elements you intend to layout (the image and the two containers) and that these elements are direct children of the Flexbox container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search