CODEWITHSUNDEEP
htmlcss
URL87
URL87

Reputation: 11022

change <div> location with just .css edit

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 ?

Upvotes: 3

Views: 169

Answers (2)

Nathan Dawson
Nathan Dawson

Reputation: 19308

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/

Upvotes: 6

Alex Char
Alex Char

Reputation: 33218

Try this

css

.myField:nth-child(1){
    float:left;
}

.myField:nth-child(3){
    float:left;
}

fiddle

Upvotes: 2

Related Questions