Forum Samples, Tips and Tricks

column-count vs. float

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.