Adding a newline in css

Question

I'm looking for the simplest way to break up a collection of inline-blocked divs without resorting to extra markup (such as br).

I started off naively thinking that the following would do the trick except that 'four' ends up on a line of its own as well which I don't really understand.

.inline {
  display:inline-block;
}

.newline {
  display:block;
}

<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>

I have tried solutions using :after/:before found here on Stackoverflow but these only work for me if my elements are inline instead of inline-block.

Regrettably I also need to support IE6!

Attempt with floats

This example below does not display properly in IE 6

.inline {
  float: left;
  width: 50px;
  height: 50px;
  background: #F00;
}
.newline {
  clear: left;
}

<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>

The result in IE 6

Answer 1

For IE6 and other old browsers you need to add a clear line for example using this code:

<div class="inline">one</div>
<div class="inline">two</div>
<div class="visualClear"></div>
<div class="inline">three</div>
<div class="inline">four</div>


.inline {
     float: left;
     width: 50px;
     height: 50px;
     background: #F00;
}   
.visualClear {
     clear: both;
     display: block;
}

I know that it isn´t very pretty but it will work for you.