CODEWITHSUNDEEP
htmlcssalignment
src091
src091

Reputation: 2847

Aligning floated DIVs in a flexible container

I have a set of left floated DIVs inside of flexible container (part #1), when container is resized in a way that it can't contain all of the DIVs in a single row instead of default behavior (2) I want the rows to be perfectly aligned maintaining spaces where needed (table-like behavior), as shown in part #3.

Is it possible to accomplish this using CSS and HTML alone? alt text

Upvotes: 2

Views: 411

Answers (3)

zzzzBov
zzzzBov

Reputation: 179086

Your #2 image is not what happens when elements are left-floated. You can see an example of what will happen on this fiddle.

And if you're interested in the reason:

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

If you know in advance how wide the container is going to be, you can set every :nth-child() to have clear:left to display in a row.

in the fiddle, you can add:

div:nth-child(3n)
{
  clear: left;
}

In the css and everything will be aligned properly. The issue will be if you want a fluid layout with auto-adjusting rows. You'll need to use JavaScript to adjust the styles on the elements on resize.

Upvotes: 1

Damon Skelhorn
Damon Skelhorn

Reputation: 1511

For this to work, you would have to know the height for your biggest div. If this is dynamic and you can't control or predict the height then I dont think this will work.

Essentially, wrap each of the divs in another div and set the min-height property to that of the biggest div you expect to see.

This should produce #3.

Also check out the min-height hack for IE 7 - Min-Height Fast Hack

Upvotes: 0

Tesserex
Tesserex

Reputation: 17314

First thing that comes to mind is to wrap every box in a uniformly sized div that does the floating, and which has a transparent background.

Upvotes: 0

Related Questions