To enhance the appearance of selected li elements, consider assigning a class and utilizing CSS3 pseudo selectors to manage floats based on their position.
For example:
li.active ~ li:nth-of-type(1n+2) {
float: left
}
li.active ~ li:nth-of-type(1n+2):after {
content: '\0a00' // space
width: 0;
height: 0;
line-height: 0;
clear: left;
}
If you are unfamiliar with these selectors, allow me to explain them.
/ The ~ (tilde) serves as an adjacent element selector. Consider the following HTML structure
<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
And associated CSS
li.active ~ li {
background-color: green;
}
// The ~ will target all li elements following the occurrence of
// the .active element and apply a green background. Illustrated below with an *
<li></li>
<li></li>
<li class="active"></li>
<li></li> *
<li></li> *
The nth-of-type selector allows for selecting independent siblings of the matched element
In the context of the previous HTML sample
With this CSS
// The nth-of-type value can be expressed as an equation e.g. 1n + 2
li:nth-of-type(2) {
background-color: green;
}
<li></li>
<li></li> *
<li class="active"></li>
<li></li>
<li></li>
When combined:
li.active ~ li:nth-of-type(2) {
background-color: green;
}
<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li> *
This solution is elegant but may require some adjustments to achieve desired results. CSS provides the necessary tools to do so.
Refer to a complete list of CSS3 selectors and their functionalities here:
http://www.w3.org/TR/css3-selectors/#selectors
You might need to explore further for more practical examples than those in the documentation.
This approach is supported by modern browsers only. For IE compatibility, consider using:
ie9.js
http://code.google.com/p/ie7-js/
Alternatively, if jQuery masonry appeals to you: