css3 - CSS Float Left to Line Up -

(jsfiddle) using float : left, can achieve this:

<ul>     <li>&nbsp;</li>     <li>&nbsp;</li>     <li>&nbsp;</li>     <li class="half">&nbsp;</li>     <li class="half">&nbsp;</li>     <li class="half">&nbsp;</li>     <li class="half">&nbsp;</li> </ul> 

and css:

li{     width:100px;     height:100px;     background:#eee;     display:inline-block !important;     border:1px solid #ccc; } li.half{     width:50px; height:50px } 

but, how can achieve this? (by staying in html markup - that's why html not tagged!!)

i notice in first case, second line of small images new line. but, ways go through this?

you achieve you're looking for, no matter 4 smaller items appear in list nor how many groups of them have , without need additional markup using adjacent sibling selectors , bit of trickery involving margins.

update: added ability have group of 3 small items

here's quick proof of concept you, last 4 rules being important we're doing here. caveat below, stands, can't have group of small items following group of small items.

ul{      font-size:0;      list-style:none;      margin:0;      padding:0;      width:550px;  }  li{      background:red;      height:100px;      display:inline-block;      margin:0 10px 10px 0;      vertical-align:top;      width:100px;  }  li.small{      background:green;      height:45px;      width:45px;  }  li.small+li.small+li.small{      margin:55px 10px 10px -110px;  }  li.small+li.small+li.small+li:not(.small){      margin-left:55px;  }  li.small+li.small+li.small+li.small{      margin:55px 10px 10px 0;  }  li.small+li.small+li.small+li.small+li:not(.small){      margin-left:0;  }

<ul>      <li></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li></li>      <li></li>      <li></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li></li>      <li></li>  </ul>

to explain what's going on above in last 4 rules:

1. select every item of class small preceded @ least 2 other items of class small. move them down, using top margin height of 1 small item plus margin size - 45+10=55px. move them right, using negative left margin width of 2 small items plus double margin size - 2*(45+10)=110px.

2. to "reset" margins when group has 3 small items, introduce negation pseudo class select every item preceded @ least 3 items of class small not have small class. using margin-left, move left width of 1 small item plus margin size - 45+10=55px.

3. next, need override margins every fourth item of class small. not so, layout messed each fourth item matches first selector. one, need move down again height of 1 small item plus margin size so, in step 1, set top margin 55px. no need set left margin here as, using negative margin on preceding item, 1 shifts right it.

4. and, finally, need remove margin-left every item not .small , preceded @ least 4 items are.

---

update 27/05/16: so, came , modified have ability have number of small items 8 grouped together. haven't had chance document new rules yet , there couple of limitations in group of small items must contained single row , row can not end single small item or group of 5. can see code becoming pretty unwieldy , worse add ability have more 8 small items grouped together.

ul{      background:#000;      font-size:0;      list-style:none;      margin:0 auto;      padding:10px 0 0 10px;      width:550px;  }  li{      border:1px solid #fff;      box-sizing:border-box;      background:red;      height:100px;      display:inline-block;      margin:0 10px 10px 0;      vertical-align:top;      width:100px;  }  li.small{      background:green;      height:45px;      width:45px;  }  li.small+li.small+li.small+li.small+li.small{      background:blue;  }  li.small:first-child+li:not(.small),li:not(.small)+li.small+li:not(.small),li.small:first-child+li.small+li.small+li.small+li.small+li:not(.small),li:not(.small)+li.small+li.small+li.small+li.small+li.small+li:not(.small){      margin-left:55px;  }  li.small+li.small+li.small{      margin:55px 10px 10px -110px;  }  li.small+li.small+li.small+li:not(.small){      margin-left:55px;  }  li.small+li.small+li.small+li.small{      margin:55px 10px 10px 0;  }  li.small+li.small+li.small+li.small+li:not(.small){      margin-left:0;  }  li.small+li.small+li.small+li.small+li.small{      margin-top:0;  }  li.small+li.small+li.small+li.small+li.small+li.small+li.small{      margin:55px 65px 10px -110px;  }  li.small+li.small+li.small+li.small+li.small+li.small+li.small+li.small{      margin:55px 10px 10px -55px;  }

<ul>      <li class="small"></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li class="small"></li>      <li class="small"></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>      <li class="small"></li>  </ul>