I have a list and the li's have a float:left;
. The contents after the <ul>
should be aligned correctly. Therefore i can build the following:
I thought, that I can remove the <div class="clear">
by using pseudo selectors like :after.
But the example is not working:
Do I always have to create a separate div to clear floating elements?
Use
.wrapper:after {
content : '\n';
}
Much like solution provided by Roko. It allows to insert/change content using : after and :before psuedo. For details check http://www.quirksmode.org/css/content.html
The text 'dasda' will never not be within a tag, right? Semantically and to be valid HTML it as to be, just add the clear class to that:
No, you don't it's enough to do something like this:
<ul class="clearfix">
<li>one</li>
<li>two></li>
</ul>
And the following CSS:
ul li {float: left;}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Source: Stackoverflow.com