flex box item float right is not working

Question

I have a div element which contain image background and descriptions, I want the description to float right inside the image

.about-us {
  &__left {
    display: flex;
    background-image: url('/assets/images/01.jpg');
    background-repeat: no-repeat;
    height: 482px;
  }
  &__leftdescription {
    margin-left: auto;
    order: 2;
  }
}

<div class="about-us">
  <div class="about-us__left">
    <div class="about-us__leftdescription">
      <h1>About Us</h1>
      <ul>
        <li>Specjalizujemy się w outsourcingu kadry IT;</li>
        <li>Zapewniamy możliwość współpracy ze starannie dobranymi ekspertami IT lub całymi ich zespołami;</li>
        <li>Pracujemy zgodnie z zasadami biznesu Klienta, dbając o wysoki standard świadczonych usług;</li>
        <li>Budujemy i utrzymujemy długotrwałe relacje, oparte na wzajemnym zaufaniu;</li>
        <li>Wartości, jakimi się kierujemy to odwaga, efektywność rozwiązań technicznych, zaangażowanie, zadowolenie Klientów i inwestowanie w kapitał ludzki;</li>
        <li>Jesteśmy elastyczni w dostosowaniu się do technologii, modelu biznesowego oraz kryteriów finansowych naszych Klientów. Ofertę przystosowujemy indywidualnie, aby sprostać szybko zmieniającym się warunkom i trendom rynkowym.</li>
      </ul>
    </div>
  </div>
</div>

Expected result should look like this:

Here is what I have so far

NOTE here is jsfiddle https://jsfiddle.net/Mwanitete/5c6yfe7s/6/

What am I doing wrong here? any suggestion help will be apreciated, thanks

Your structure is wrong and you are applying flexbox to the wrong element - https://jsfiddle.net/Paulie_D/g16sejp8/ — Paulie_D, Aug 22 '18 at 15:03
your solution is hack sorry :( I didnt check it well I said , text must be inside a background image what you did is just separating text and image which is wrong :( — The Dead Man, Aug 22 '18 at 15:58

Túlio Oliveira · Accepted Answer · 2018-08-22T15:29:49.603

To make a <div> element, whose parent is using display:flex, float to the right, you can add the CSS properties flex-direction: row; justify-content: flex-end to the parent, like the example below:

.about-us__left {
    display: flex;
    flex: 1; 
    flex-direction: row;
    justify-content: flex-end;
    background-image: url('https://s15.postimg.cc/t22lvakm3/image.jpg');
    background-repeat: no-repeat;
    height: 482px;
}
.about-us__leftdescription {
    width: 50%;
}

<div class="about-us">
  <div class="about-us__left">
    <div class="about-us__leftdescription">
      <h1>About Us</h1>
      <ul>
        <li>Specjalizujemy się w outsourcingu kadry IT;</li>
        <li>Zapewniamy możliwość współpracy ze starannie dobranymi ekspertami IT lub całymi ich zespołami;</li>
        <li>Pracujemy zgodnie z zasadami biznesu Klienta, dbając o wysoki standard świadczonych usług;</li>
        <li>Budujemy i utrzymujemy długotrwałe relacje, oparte na wzajemnym zaufaniu;</li>
        <li>Wartości, jakimi się kierujemy to odwaga, efektywność rozwiązań technicznych, zaangażowanie, zadowolenie Klientów
          i inwestowanie w kapitał ludzki;</li>
        <li>Jesteśmy elastyczni w dostosowaniu się do technologii, modelu biznesowego oraz kryteriów finansowych naszych Klientów.
          Ofertę przystosowujemy indywidualnie, aby sprostać szybko zmieniającym się warunkom i trendom rynkowym.</li>
      </ul>
    </div>
  </div>
</div>

But be careful with the structure you used as well as the fixed height, because it doesn't support viewport dimension changes and will not render accordingly when the width is below a certain value!

Thanks for your solution , much better solution than the rest — The Dead Man, Aug 22 '18 at 16:22

score 0 · Answer 2 · answered Aug 22 '18 at 16:09

0

You can do this in your CSS:

.about-us__left {
  display: flex;
  background-image: url('https://s15.postimg.cc/t22lvakm3/image.jpg');
  background-repeat: no-repeat;
  background-size:contain;
  height: 482px;
}
.about-us__leftdescription {
  margin-left: auto;
  flex:0 1 50%; 
}

Unfortunately this would look nice only on wide screen (1200px)

answered Aug 22 '18 at 16:09

enxaneta

31,608
5
29
42

1

Your right there is more css to be applied as you can see even in 1200px stil does not look as expected result, meaning I will add more css to it and find the perfect solution, thanks for helping – The Dead Man Aug 22 '18 at 16:17
if you change 50% t0 40% your solution is top there. – The Dead Man Aug 22 '18 at 16:38

flex box item float right is not working

2 Answers2