Adding new line to css
I'm looking for the easiest way to break up a collection of inline locks without resorting to additional markup (e.g. br
).
I started to naively think the following would do the trick, except that the "four" ends on its own line, which I really don't 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 they only work for me if my elements are inline and not inline blocks.
Unfortunately I also need to support IE6!
Trying 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>
Result in IE 6
+3
source to share
1 answer
For IE6 and other older 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 this is not very pretty, but it will work for you.
+1
source to share