Hi,
I'm just playing around a bit with various column-count settings for different parts of a document.

Consider this code snippet:

body {
   column-count: 2 ;
}

div.staysattwo {
    column-count: 1 ;
}


div.staysattwotoo {
    column-count: 0.5 ;
}


div.bottomone {
    float: bottom ;
}    

div.threebytwo {
   column-count: 3 ;
}

while the div.staysattwo ignores the explicit column setting, the div.bottomone switches into single-column-mode, and div.threebytwo switches into six column mode. staysatwotoo was just a quick test to see if I can hack around this by defining half-columns …

I can see how column-count subdivides the current box and not the outermost one (body). float moves the div out of the surrounding box and thus column-count settings don't apply anymore.

Morale of the story: It's still not visual layout, keep the box model in mind. If you want to reset the column count respective to page width, float your divs.