Floating separate containers left/right to each other

user_4789268 0
Viewed 627

I have 5 containers:

<div class="wrapper">
 <div id="container-1"></div>
 <div id="container-2"></div>
 <div id="container-3"></div>
 <div id="container-4"></div>
 <div id="container-5"></div>
</div>

I'm trying to float the first 3 containers to the left, and the last 2 to the right (starting next to the first one floated left, on top)

currently I only achieved to float the first 3 to the left, and the last 2 to the right, but starting next to the last, floated left container and not to the top one.

Fiddle:

html,
body {
  margin: 0;
  padding: 0;
}

.left,
.right {
  width: 40%;
  height: 100px;
  float: left;
  clear: left;
  background: red;
  margin: 5px;
}

.right {
  float: right;
  clear: right;
  background: green;
  text-align: right;
}
<ul>
  <li>div's are dynamic so left/right divs will be added, so unable to fixed position them in html</li>
</ul>
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>

Expected result should be e.g.

1 - 3
2 - 5
4 - /
6
css-float containers css html
3 Answers

You can used Flexbox to ordering the elements

.wrapper {
  display:flex;
  flex-wrap: wrap;
}
#container-1, #container-2, #container-3, #container-4, #container-5{
 float:left;
 width: 50%; 
}
#container-1 {
  order:1;
}
#container-4 {
  order:2;
}
#container-2 {
  order:3;
}
#container-3 {
  order:5;
}
#container-5 {
  order:4;
}
<div class="wrapper">
  <div id="container-1">container 1</div>
  <div id="container-2">container 2</div>
  <div id="container-3">container 3</div>
  <div id="container-4">container 4</div>
  <div id="container-5">container 5</div>
</div>

user_62846610

EDIT

  html,
body {
  margin: 0;
  padding: 0;
  position:relative;
}

.left,
.right {
  width: 40%;
  height: 100px;
  margin: 5px;

}

.left{
   float: left;
  clear: left;
  background: red;
}

 .right ~ .right{
  position:absolute;
  top:0;
  right:0;
}
.right {
  background: green;
  text-align: right;
  float:right;
}

<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>

EDIT 2

      html,
body {
  margin: 0;
  padding: 0;
}

.left,
.right {
  width: 40%;
  height: 100px;
  margin: 5px;

}

.left{
   float: left;
  clear: left;
  background: red;
}

.right {
  background: green;
  text-align: right;
  float:right;
}

<div class="left"></div>
<div class="right"></div>
<div class="right"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
user_45483980

I think that I might have found a solution to this issue. Hope I'm not too late.

Here's the new code:

HTML ( Added a few more elements to test it out )

<ul>
  <li>div's are dynamic so left/right divs will be added, so unable to fixed position them in html</li>
</ul>
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>

CSS:

html,
body {
  margin: 0;
  padding: 0;
}

.left,
.right {
  width: 40%;
  height: 100px;
  float: left;
  clear: left;
  background: red;
  margin: 5px;
}

.right {
  float: right;
  clear: right;
  background: green;
  text-align: right;
  position: relative; 
  top: -110px; 
}

Here's a fiddle: https://jsfiddle.net/xw456o6c/1/

Admin1
Related