CODEWITHSUNDEEP
htmlcss
iBrazilian2
iBrazilian2

Reputation: 2293

How to move block a right, and block b left with pure CSS?

I'd like to know if the following is possible:

Move block b to the left, and move block a to the right with pure CSS(with our without flexbox) while the html is as follows:

.text-container {width: 100%; display: flex;}
.a-block { width: 50%; }
.b-block { width: 50%; }
.b-block img { width: 100%; }
<div class="text-container">
  <div class="a-block">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus est eu nulla ullamcorper pulvinar. Vestibulum sem mi, tempor in metus vitae, iaculis volutpat purus. Donec at ex auctor, blandit mauris id, egestas ex. Aenean justo ipsum, commodo id accumsan sed, aliquet ac ante. Nam sagittis consequat consectetur. Nullam fringilla, nunc ac tempus fermentum, ante ipsum varius tortor, eget convallis libero metus vitae dolor. Phasellus tempor, turpis faucibus hendrerit ullamcorper, leo nibh commodo metus, a interdum nunc metus quis mauris. Proin libero nisl, consequat sed venenatis at, vehicula eu neque. Nulla ac eleifend risus. Vestibulum rutrum faucibus massa nec vulputate. 
  </div>

  <div class="b-block">
    <img src="http://i.imgur.com/kaXCm6C.png">
  </div>
</div>

Personally, I thought I could move them by simple using float, block a float: right, block b float: left, unfortunately that did not work.

Upvotes: 0

Views: 282

Answers (2)

Akash Ryan
Akash Ryan

Reputation: 341

You Need to add one CSS (flex-direction: row-reverse;) to reverse the position of the div.

Your Modified Code:

.text-container {width: 100%; display: flex; flex-direction: row-reverse;}
.a-block { width: 50%; }
.b-block { width: 50%; }
.b-block img { width: 100%; }
<div class="text-container">
  <div class="a-block">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus est eu nulla ullamcorper pulvinar. Vestibulum sem mi, tempor in metus vitae, iaculis volutpat purus. Donec at ex auctor, blandit mauris id, egestas ex. Aenean justo ipsum, commodo id accumsan sed, aliquet ac ante. Nam sagittis consequat consectetur. Nullam fringilla, nunc ac tempus fermentum, ante ipsum varius tortor, eget convallis libero metus vitae dolor. Phasellus tempor, turpis faucibus hendrerit ullamcorper, leo nibh commodo metus, a interdum nunc metus quis mauris. Proin libero nisl, consequat sed venenatis at, vehicula eu neque. Nulla ac eleifend risus. Vestibulum rutrum faucibus massa nec vulputate. 
  </div>

  <div class="b-block">
    <img src="http://i.imgur.com/kaXCm6C.png">
  </div>
</div>

Upvotes: 1

Sankar
Sankar

Reputation: 7107

Since you are using flex, you can use order property

The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.

.text-container {
  width: 100%;
  display: flex;
}

.a-block {
  width: 50%;
  order: 1;
}

.b-block {
  width: 50%;
  order: 0;
}

.b-block img {
  width: 100%;
}
<div class="text-container">
  <div class="a-block">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus est eu nulla ullamcorper pulvinar. Vestibulum sem mi, tempor in metus vitae, iaculis volutpat purus. Donec at ex auctor, blandit mauris id, egestas ex. Aenean justo ipsum, commodo
    id accumsan sed, aliquet ac ante. Nam sagittis consequat consectetur. Nullam fringilla, nunc ac tempus fermentum, ante ipsum varius tortor, eget convallis libero metus vitae dolor. Phasellus tempor, turpis faucibus hendrerit ullamcorper, leo nibh
    commodo metus, a interdum nunc metus quis mauris. Proin libero nisl, consequat sed venenatis at, vehicula eu neque. Nulla ac eleifend risus. Vestibulum rutrum faucibus massa nec vulputate.
  </div>

  <div class="b-block">
    <img src="http://i.imgur.com/kaXCm6C.png">
  </div>
</div>

for more info : https://developer.mozilla.org/en/docs/Web/CSS/order

Upvotes: 3

Related Questions