# Creating Newspaper Columns in elm-ui

**URL:** <https://discourse.elm-lang.org/t/creating-newspaper-columns-in-elm-ui/6295>\
**Category:** Learn\
**Created:** [September 22, 2020, 5:54pm UTC](https://discourse.elm-lang.org/t/creating-newspaper-columns-in-elm-ui/6295 "2020-09-22T17:54:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![evelios](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/evelios/32/2942_2.png) [@evelios](https://discourse.elm-lang.org/u/evelios)\
**Post date:** [September 22, 2020, 5:54pm UTC](https://discourse.elm-lang.org/t/creating-newspaper-columns-in-elm-ui/6295/1 "2020-09-22T17:54:58Z")

</div>

I am looking to create a newspaper column style format in my app that is using elm-ui. I have been able to figure out a way to create it, but it is not without complications. First off I found that there was already some [css properties](https://www.w3schools.com/css/css3_multiple_columns.asp) that control this behavior, mainly `column-count`.

This works great if you are only using text for the periodical. Here is an example of this in action.  
[https://ellie-app.com/b3PBXCNL94qa1](https://ellie-app.com/b3PBXCNL94qa1)

```elm
textColumn
    [ Element.htmlAttribute 
        <| Html.Attributes.style "column-count" "2"
    , Element.htmlAttribute 
        <| Html.Attributes.style "display" "block" 
        -- Alternatively "inline-block"
    ]
    (...) -- Paragraphs and text elements

```

However, when you have more than `Element.paragraph` and `Element.text` in there, things start to go awry. Changing from using `display = flex` to `display = block` has consiquences on any other elements that may be in your content body. It looks like elm-ui makes heavy use of the _flex_ property in for it’s styling

The picutres show what is happening to me because `column []` blocks are getting messed up.

Bottom of the first column  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/2/2ad1148b5ae003d1d4f6f1f179e1c0567e921a2c.png)

Top of the second column  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/0/06d6d9905f5db8d40e7d40613aa9d2d1589a4310.png)

Unfortunately, the best I was able to recreate this issue was with this ellie which doesn’t really show the same problems that I had in my project. This does _somewhat_ capture a problem state if you are willing to horizontally resize the browser carefully, you can see states where the **M** is shifted down into the text.  
[https://ellie-app.com/b3Qg7dmWVJPa1](https://ellie-app.com/b3Qg7dmWVJPa1)

The last thing I’ll say is that I was looking to create more of a book experience where the user would only see the content that is listed on that page, then when they scroll they would get the continuation of the content. If I was to use only basic formatting and stick with what I had in my ellies, the user would have to read the first column all the way down to the bottom and then pick up back up at the top of the page. I haven’t been able to come up with an approach that would break up the content into _one viewport_ worth of information. If there was a way of figuring out that information, then I could do this only in elm-ui and then just use groups of columns that I create myself.

Please let me know what your thoughts are on all of this and if you know of anything I could try to accomplish any of this. It seems like I am stretching the limits of both elm-ui and css in general on this one by adding in the page-break functionality.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [October 2, 2020, 5:55pm UTC](https://discourse.elm-lang.org/t/creating-newspaper-columns-in-elm-ui/6295/2 "2020-10-02T17:55:05Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.