bestprogrammerintheworld bestprogrammerintheworld - 2 months ago 6
HTML Question

Float right based on wrong item

I have an array of items I want to list (listed from a database)

<ul class="allitems">
<li class="item laying left">Item1</li>
<li class="item laying left">Item2</li>
<li class="item standing right">Item3</li>
<li class="item standing left">Item4</li>
<li class="item laying right">Item5</li>
<li class="item laying right">Item6</li>
</ul>


enter image description here

All items are floated left, but the issue that Item3 is floated left relatively to Item2. I want to be on the "top" (as arrow illustrates) relativity to Item1.

The css:

.allitems {list-style-type: none;margin:0;padding:0;width:1000px;}
.allitems .item {margin-bottom:20px;}
.allitems .item.laying {width:660px;height:230px;background:#006505;color:#fff;float:left;}
.allitems .item.standing {width:320px;height:480px;background:#007cb2;color:#fff;float:left;}
.allitems .item.standing.left {margin-right:20px;}
.allitems .item.standing.right {margin-left:20px;}


How can I solve this without changing the order of the items? (with css!). I have no problem adding html, but I can't change the order.

Answer

You should be able to achieve what you want by not floating the standing.right element - just add margin to it instead:

.allitems {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 1000px;
}
.allitems .item {
  margin-bottom: 20px;
}
.allitems .item.laying {
  width: 660px;
  height: 230px;
  background: #006505;
  color: #fff;
}
.allitems .item.standing {
  width: 320px;
  height: 480px;
  background: #007cb2;
  color: #fff;
}
.allitems .item.standing.left {
  margin-right: 20px;
}
.allitems .item.standing.right {
  float: none;
  /*remove float and margin left auto instead*/
  margin-left: auto;
}
.left {
  float: left;
}
.right {
  float: right;
}
<ul class="allitems">
  <li class="item laying left">Item1</li>
  <li class="item laying left">Item2</li>
  <li class="item standing right">Item3</li>
  <li class="item standing left">Item4</li>
  <li class="item laying right">Item5</li>
  <li class="item laying right">Item6</li>
</ul>

Update

Just seen you don't want to use a specific pixel value on the margin, so instead of margin left 680px, you can use margin-left:auto and this will just right align the standing div (see edited snippet above)