CSS Float Left to Line Up

Question

(JSFIddle) Using float : left, we 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 we achieve this? (By staying in this HTML markup - that's why HTML is not tagged!!)

I notice that in the first case, the second line of small images is a new line. But, any ways to go through this?

Answer 1

The best solution to this is to restructure your markup. You need to create a new floating context (if you go float, which I recommend due to white-space related problems if you go inline-block) for the smaller list items, so you can end the float on the third item (to create a "new line") without destroying the float of the bigger list items.

Another approach to solve this would be flex box model, but this is way more difficult to learn and does not work cross-browser.

ul,
li {
  box-sizing: border-box;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  display: block;
  float: left
}
ul {
  width: 400px
}
ul,
h3 {
  clear: both
}
li {
  width: 100px;
  height: 100px;
  background: #eee;
  border: 1px solid #ccc;
  float: left;
}
.sublist > li {
  width: 50px;
  height: 50px
}
.sublist li:nth-of-type(3) {
  clear: left;
}

<h3>Example 1:</h3>

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

<h3>Example 2:</h3>

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

Check this (identical) fiddle:

https://jsfiddle.net/Lok8oo6b/3/

Edit: This is a working solution which does not require any markup changes:

ul,
li {
  box-sizing: border-box;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  display: block;
  float: left
}
ul,
h3 {
  clear: both
}
li {
  width: 100px;
  height: 100px;
  background: rgba(240, 240, 240, 0.5);
  border: 1px solid #ccc;
  position: relative;
  display: inline-block;
}
.half {
  background-color: #fff;
  height: 50px;
  width: 50px;
}
.half+.half+.half {
  left: -100px;
  top: 50px;
}
.half+.half+.half+.half+li {
  margin-left: -100px;
}

<h3>Example 1:</h3>

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

<h3>Example 2:</h3>

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

https://jsfiddle.net/Lok8oo6b/6/

Answer 2

You could achieve what you're looking for, no matter where the 4 smaller items appear in your list nor how many groups of them you have and without the need for any additional markup by using adjacent sibling selectors and a bit of trickery involving margins.

UPDATE: Added the ability to have a group of 3 small items

Here's a very quick proof of concept for you, with the last 4 rules being the most important to what we're doing here. The only caveat with the below, as it stands, is that you can't have a group of small items immediately following another 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 those last 4 rules:

1. Select every item of class small that is immediately preceded by at least two other items of class small. Move them down, using a top margin by the height of one small item plus the margin size - 45+10=55px. Move them to the right, using a negative left margin by the width of 2 small items plus double the margin size - 2*(45+10)=110px.

2. To "reset" the margins when a group only has 3 small items, we introduce the negation pseudo class to select every item that is preceded by at least three items of class small but does not itself have the small class. Using margin-left, we move that left by the width of one small item plus the margin size - 45+10=55px.

3. Next, we need to override the margins for every fourth item of class small. Were we not to do so, the layout would be completely messed up as each fourth item also matches the first selector. For this one, we just need to move it down again by the height of one small item plus the margin size so, as in step 1, we set the top margin to 55px. No need to set the left margin here as, by using a negative margin on the preceding item, this one shifts to the right with it.

4. And, finally, we need to remove the margin-left from every item that is not .small and is preceded by at least four items that are.

---

UPDATE 27/05/16: So, I finally came back to this and modified it to have the ability to have a any number of small items up to 8 grouped together. I haven't had a chance to document the new rules yet and there are a couple of limitations in that a group of small items must be contained to a single row and a row can not end with a single small item or a group of 5. You can already see the code is becoming pretty unwieldy and will only get worse as you add the ability to have more than 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>