change <div> location with just .css edit

css, html

Solution

You could use the following CSS:

.myField {
    float: left;
}

.myField:nth-child(2n+1) {
    clear: both;
}

The first rule will float the elements. The second rule says that the element after every 2 elements will clear the float meaning it will fall to the next line.

If you then decided you wanted 3 per row you could easily modify this to accommodate:

.myField:nth-child(3n+1) {

Please be aware this uses CSS3 selectors therefore won't work in IE8 or below without using something like selectivizr: http://selectivizr.com/

Problem

Having 4 `<div class="myField">` each one below the other - http://jsfiddle.net/urielz/6Mdmd/ I want to change its view to be two couple of face each other - like the result in - http://jsfiddle.net/urielz/q8EK5/ but with the requirement that it would be with just edit the `.css` - mean keep on same `<body>` . How could I get that ?

Original source