Highlighted

Can my list 'flow' across columns?

Participant ,
Apr 25, 2020

Copy link to clipboard

Copied

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 

 

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

Using_multi-column_layouts 

Views

2.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Can my list 'flow' across columns?

Participant ,
Apr 25, 2020

Copy link to clipboard

Copied

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 

 

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

Using_multi-column_layouts 

Views

2.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Apr 25, 2020

Copy link to clipboard

Copied

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

Using_multi-column_layouts 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
Apr 25, 2020

Copy link to clipboard

Copied

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 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Apr 25, 2020

Copy link to clipboard

Copied

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

 

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
Apr 26, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Apr 26, 2020

Copy link to clipboard

Copied

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

 

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Participant ,
Apr 26, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Apr 26, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
osgood_ LATEST
LEGEND ,
Apr 26, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group