Question

I have a series of LI inside a UL like this:

<ul>
    <li class="section left"></li>
    <li>I want to float this on the left</li>
    <li>I want to float this on the left</li>
    <li>I want to float this on the left</li>
    <li class="section right"></li>
    <li>I want to float this on the right</li>
    <li>I want to float this on the right</li>
    <li>I want to float this on the right</li>
</ul>

This HTML is generated by php and I cannot alter the HTML, on the other hand I have the ability to assign classes to individual LI elements. The UL and LIs will contain form elements, which I want to distribute in two sections, floating some contents (some LIs) on the left and some content (other LIs) on the right.

If I could nest ULs within the main UL this would be much easier, treating inner ULs as blocks, but I can’t do that here.

How to accomplish the same result with CSS given the HTML constraints mentioned above? I mean yeah I could assign floating classes individually to each LI but I was hoping to a more elegant solution here.

thank you

Answer 1

Add the following CSS3 code:

ul{width:100%;list-style:none;}
/* the '~'  (general sibling combinator)
 * selector will select all following siblings in the document tree.
 * This selector is part of the CSS3 selector recommendation,
 * see also http://www.w3.org/TR/selectors/#general-sibling-combinators
 *
*/
li.section.left, li.section.left ~ li{
    background-color:#faa;
    float:left;
    margin-right:1em;
}
li.secton.right , li.section.right ~ li{
    background-color:#afa;
    float:right ;
    margin-left:1em;
    margin-right:0;
}

Use this with your proposed code and you’ll get what you need (at least in decent browsers). JSFiddle Demo / Demo with small font size (to see effect)

Update: IE7+ compatible version (simply without :not)