Challenge: make irregular-height floats behave like equal height floats

HTML & CSS
1

…without changing the height of the elelements

My goal is to make attached screenshot number 1 look the same as attached screenshot number 2.

The “broken” version just has a set of floated elements with fixed widths. The problem is the floated elements jump up when an element in the row above it becomes higher than the elements after it in its own (visual) row.

In the fixed version I added clear:left to the first element in each visual row. There are no tags to wrap the rows.

I’ve been unable to come up with a way for the floats to stop popping out of the row. I guess it’s just the way that floats are designed but that doesn’t prevent me from trying to hack it :slight_smile:

any ideas?

I attached a zip file with the html/css I used to make the screenshot. If you open the page and it doesn’t look broken, make your browser window narrower and it will break.

2

Your attachments aren’t approved yet so I may be barking up the wrong tree … but could you use display:inline-block here instead of float?

3

Thx. I tried this and it didn’t seem to server a reliable way to build a layout. Are my attachments approved now?

4

You could put

.grid-new-row {clear:both;}

That will put any new row item below all other floated items before it, not just against the left margin.

5

As Stevie said use inline-block for a more robust layout otherwise you will not be able to clear the previous row in IE7 and under unless you have an element that spans 100% width and is set to clear:both. Adding clear both to the first item of each row doesn’t work in ie7 and under because subsequent floats still snag.

Display:inline-block gets over this problem perfectly but does mean that you have to allow for the whitepsace nodes between elements though.

IE6 and 7 need the following hacks to make inline-block work.


.grid-100
,.grid-3-4 /* Read the dash as a slash so 3/4 (3 quarters, or 75% */
,.grid-2-3
,.grid-1-2
,.grid-1-3
,.grid-1-4
,.grid-1-5
,.grid-1-6
,.grid-1-7
,.grid-1-8
,.grid-1-12
,.grid-phi
,.grid-phi2 /* This means phi^2 (phi squared) */
,.grid-phi3 {
/*float:left;*/
word-wrap:break-word; /* This will only break words if they are so big they otherwise go off the grid */
display:inline-block;
vertical-align:top;
}
* html .grid-100
,* html .grid-3-4 /* Read the dash as a slash so 3/4 (3 quarters, or 75% */
,* html .grid-2-3
,* html .grid-1-2
,* html .grid-1-3
,* html .grid-1-4
,* html .grid-1-5
,* html .grid-1-6
,* html .grid-1-7
,* html .grid-1-8
,* html .grid-1-12
,* html .grid-phi
,* html .grid-phi2 
,* html .grid-phi3 {
display:inline;
}
*+html .grid-100
,*+html .grid-3-4 /* Read the dash as a slash so 3/4 (3 quarters, or 75% */
,*+html .grid-2-3
,*+html .grid-1-2
,*+html .grid-1-3
,*+html .grid-1-4
,*+html .grid-1-5
,*+html .grid-1-6
,*+html .grid-1-7
,*+html .grid-1-8
,*+html .grid-1-12
,*+html .grid-phi
,*+html .grid-phi2 
,*+html .grid-phi3 {
display:inline;
}

Some example using inline-block instead of floats:

Untitled Document
Untitled Document
Captions

6

Hi Paul, what do you mean here? Im using my grid system in a CMS and there’s definitely going to be a lot of spaces between tags in the code, will these spaces break the layout?

7

Hi,

When you use inline block you get the whitespace in the html being taken into account (like the space between words). Usually this is not a problem unless you have accounted for every single pixel across the width or need to make an exact fit.

I tried it out on your layout and it seems to do what you want but of course I may not see the finer detail in that zip.

There are ways of closing the gap but best avoided for simplicity.

Using inline-block is the only way to have neat lines of irregular blocks. It can’t be done with floats unless you put a 100% wide element at the start of each row and set it to clear:both which of course is impossible for a fluid width page as the number of elements per row will vary.

You can see how well it works in the links I gave above.