Can my list 'flow' across columns?

[higgsyd]

At the below page is a list of names.  I'd like to format it as in Word's newspaper columns feature.  So when you insert another name into the list, the list expands and flows into the next column.' e.g.. say I insert a new entry in the list in column one, that column shifts down one line and if necessary, flows into column two which also expands to cater for the new entry.  At the moment this is a table based layout and adding new entries requires a new row, resulting in empty cells in the other colmns.  My attempts to solve this with Grid did not seem to work.  Any ideas ? Many thanks.

http://ancestry.higgsy.co.uk/content_higgs.php 

[pziecina · Accepted solution]

Nothing simpler to do, just use css multi-column layout -

Using_multi-column_layouts 

[higgsyd]

many thanks pziecina.  I have started to implement it and the elements are flowing ok.  One question, can you say why the first element in column one ("Higgs, Adelaide born 1852") is dropped down a bit and not aligned with the top of the other columns?  please try to ignore the page backgroundcolours - these are helping me with my media query testing?

http://v45.ancestry.higgsy.co.uk/content_higgs.html 

[osgood_]

Zero out margin and add some bottom padding to the paragraph tags within the  'col' :

#col p {
margin: 0;
padding: 0 0 20px 0;
}

[higgsyd]

thanks pziecina but the problem has now moved to the second column!  I tried adding top padding but the same problem.  It seems the padding has moved to the top of column two, pushing the following element down - help!

[osgood_]

Looks ok to me? All lined up at the top of each column.

http://v45.ancestry.higgsy.co.uk/content_higgs.html 

[higgsyd]

thanks osgood, they still seem a shade off to me, but I'll be happy with that and move on!

[pziecina]

If it still looks off, (which could also be a browser cache problem) try adjusting the top and bottom margins 1px at a time -

margin: 1px auto 1px auto;

What is probably happening is that even though the display is in columns, the browser still treats all the 'p' elements as though it is just one long series of 'p' elements, without any other considerations. So even though a 'p' element looks o/k, the margin, (or padding) for that 'p' element may be carried over to the next column.

There is a css property for multi-column that 'tells' the browser to start a new 'p' (or any other) element in a new column, but Safari has yet to implement it. For that reason alone it is better to 'play' with the margin and padding values, until the desired visual layout is satisfactory.

[osgood_]

Yes, must be the way the browser is interpreting the multi column css layout. In Firefox on Mac it looks near perfectly lined up, on the other hand in Firefox Android it doesnt look good.