The Vexing Float-drop Layout Problem

[red]

Problem: contained boxes will float horizontally, but will not rise vertically into spaces large enough to accommodate them.- relatively positioned floats that stick to the bottom of an existing box (column) and refuse to float into available space.

layout: a simple responsive, 3-column (left) + right sidebar layout that mimics common newspaper layouts.

uses: main page wrap, left/right panel divs, left-panel gets 3 column containers sized to fit side-by-side in which each will contain some n-number of separate articles. some articles (columns) will span 2 or even 3 columns in the layout (interrupting the flow of the other columns. dummy boxes and horizontal spacers will be used to roughly make up for this column height unevenness - but will never be exact.

 

Boxes are all relatively positioned, left floats. Widths are sized to insure they all fit in the left panel. heights will be auto since the lengths of incoming articles will be unknown. For the layout, heights are fixed to help visualize the boxes.In this simple test, columns1-2 are filled first with a 2-column block; Column 3 is then filled with slightly longer article than the adjacent block. Then column 1 and 2 are floated and meant to occupy the space to the left of column3 below the col1-2 block. They float left, but refuse to float to the top of the empty space. I've tried resizing to insure a fit. combinations of right/left floats and altering div orders (which I wish to avoid if I can). no dice.

 

A simple test of this layout is at http://saczee.com/newfrontpage-layout.html[ideally, I wanted to create a layout that one could simply put incoming articles into assigned auto-height columns and have them take their place in the correct column with its top floating to the bottom of any previous article, regardless of its order in the markup (as long as the divs had proper column selectors and attributes). With the interruption of some articles that span columns this became impossible for me at my skill level. If anyone knows a layout that accomplishes that in a relatively straightforward way, let me know.

Edited September 27, 2014 by red

[Ingolme]

The reason that columns 1 and 2 don't occupy the space under the two-column box is because column 3 is floated to the left, which means that elements want to occupy space on the right-side of it.

Since here isn't enough space on the right side of column 3, columns 1 and 2 go below it.

 

If you float column 3 to the right then the other two columns will be further up.

[red]

yes, thank you, that seems to work. I also found that slightly decreasing the width of the 2-column block helped some. It was pinching column3 between itself and the parent panel. I take it that its always good to leave a little wriggle room when doing these side-by-side floats. It still intuitively puzzles me a little though. I would have thought that a sibling box, sensing insufficient space remained to the right, would have floated itself to the next available left-top flow position of its parent rather than clinging below its sibling. Well I'm sure I'll encounter other puzzles, it's all very new to me. But you got me over the first big hurdle. (and I do like that f12 dom inspector, you put in my toolbox in the other post. It's way cool, and helpful.

[red]

As I guessed, there were more little float problems - worked them out. But one, in particular seems plain weird. It's a new, simpler layout for inside pages -- 2 columns and a side bar - same wrap&nest arrangement - an outer-wrap, left/right panels and inside that column boxes and then article boxes. the last 2-column/single-article container on the page I wanted to have wrap around the previous, longer right column above it (like wrapping text around a right-floated image.)

What happened was that the last box on the page, a 2-column block with a single article in it, was doing the dropped-float thing and wouldn't wrap up the left side. So I tried all the possible combinations of floating left & right but it still stuck there. I have two global r rules governing floats. for all columns and articles:

 

.column1-2 {float:left;clear:none;}article {float:left; clear:none;}

 

now if I remove one or the other of these rules in any order nothing happens, the page stays visible, but the float stays stuck. So I removed both of them, thinking the containers (relative block/ clear none structures) were staying 'stiff' as a unit, and wouldn't wrap. When I did that, the final article wrapped all right, but the rest of the page disappeared! So, ok, something I don't know about, Some global effect of stopping the floating on the page makes things haywire. So next I applied the no-float rule just to that final column/article I'm trying to get to wrap, thusly,.nofloat{float:none; clear:none; color:green;} I applied this rule just to the markup of the one column (the color just to make sure the rule was applied)

<div class="column1-2 nofloat "> <article class="nofloat"> <p class="slug-continue1"> &etc...

 

if I apply the nofloat rule to one or the other, the page is visible but the text acts like a dropped float. if I apply it to both, the rest of the content on the page is hidden, but the target text wraps fine.a sample test is at http://saczee.com/floattest.html -- if you scroll down you can see the 2-column block neatly wrapping around an invisible page.

Edited October 1, 2014 by red

[red]

I did find that its the column1-2 box that's masking the rest the page when i turn off the floats on that and the target article. If i apply a negative z-index to the column block the page reappears. but, of course, the target column and target article disappear. I don't know if that helps. I don't understand what's happening.