Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

filling area with elements using float

filling area with elements using float

Problem

I am working with DIVs with float:left

when DIV 2 increases size

we get something like this:

+---+ +----+
| 1 | |    |
+---+ |    |
      |  2 |
      |    |
      |    |
      +----+
+---+
| 3 |
+---+

Is there a way to achieve this:

+---+ +----+
| 1 | |    |
+---+ |    |
+---+ |  2 |
| 3 | |    |
+---+ |    |
      +----+

Without having to resort to jquery?

Problem courtesy of: coiso

Solution

You can do this with pure CSS3 :nth-child property for this. Write like this:

.innerdiv:nth-child(even){
    float:right;
    border-color:red;
}

Check this http://jsfiddle.net/RsYgR/1/

Solution courtesy of: sandeep

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

filling area with elements using float

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×