floats clearing when they shouldn’t

Question

Could someone please tell me why this "tirtiary" div is not floating correctly. It should sit at the top of the page next to the others ut it doesn't – I've been looking at the code for too long and simply cannot see the problem! Please help!!

http://jsfiddle.net/jwoodcreative/k2gCQ/

UPDATE: Resolved! Thanks for the comments, made me realise the error of my ways!

Answer 1

Of course!!! I've been looking at this too much and failed to see that I'm floating 3 items all of 74%.

This is what I wanted to achieve: http://jsfiddle.net/jwoodcreative/k2gCQ/1/

I just needed to wrap all the sections on the left into one container with the width of 74%

Thanks for the comments!

Answer 2

Unfortunately, what you're expecting is not the way floats work. When you have several items floated left, as soon as one of them drops down below the next one in a layout (because there isn't space to the right), you'll never be able to get one of its sibling to go above it without extra positioning code.

Floats line up from left to right, not top to bottom. If you want a second column, you should wrap your divs in containers and align the columns first, then align the column's children.

Answer 3

The floating makes the divs are supposed to be next to eachother. Since CTA can't be next to main (74 + 74 > 100) it will be placed on the next row. Same goes for Second. Because tertiary does fit, it will be placed on the same line as the last one, since the order of the divs do not change.

Answer 4

You have the widths of your main, secondary and cta set to 74%, meaning that there just isn't enough room for all of them to sit next to each other. (74 + 74 + 74 is way over 100% width, plus you specify a 2% margin). Change the 74% to 20% and you should start to see more appropriate behavior.