CODEWITHSUNDEEP
htmlcssflexbox
The Dead Man
The Dead Man

Reputation: 5566

flex box item float right is not working

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: enter image description here

Here is what I have so far enter image description here

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

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

Upvotes: 0

Views: 193

Answers (2)

enxaneta
enxaneta

Reputation: 33054

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)

Upvotes: 0

T&#250;lio Oliveira
T&#250;lio Oliveira

Reputation: 58

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!

Upvotes: 1

Related Questions