Create Printable Newspaper-like two column layout using Foundation 6 for Sites

Question

I am looking for some guidance regarding how to create a printable newspaper-like layout using Foundation for sites. In plain CSS I can use css columns to create a two column layout where content from column 1 flows into column 2 when it needs to. I have tried using this in conjunction with Foundation for sites and it looks great on the webpage, but when I try to print the content breaks out of the columns. I am new to Foundation and would appreciate any assistance.

Hi Allison. Can you share your current layout? There will be maybe `grid-container`, `grid-x` and `cell` from [doc](https://get.foundation/sites/docs/xy-grid.html). But the issue with the floating is not that easy. — KargWare, Oct 06 '21 at 11:26
@KargWare - I used a print container with the css of `-webkit-columns: 2 200px; -moz-columns: 2 200px; columns: 2 200px; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em;` and the foundation code as `

$billNum $title $title2 ($firstname $midname $lastname)

Synopsis:
$synopsis

"
Position: $position

` — Allison, Oct 06 '21 at 16:04
@KargWare, I think the card and the two cells inside the grid-x maybe causing the problem. — Allison, Oct 06 '21 at 16:06

KargWare · Answer 1 · 2021-10-06T12:48:19.323

Try to use this here, btw. you can do it w/o Foundation as well. But you mentioned it, so create a XY-Grid and but ONE cell inside, with auto to width of 100%.

The layout with ZURB Foundation

<div class="grid-container">
    <div class="grid-x">
        <div class="cell auto">

        <div class="inner">Lorem ipsum ...</div>
        <div class="outer">Lorem ipsum (even more)</div>

        </div>
    </div>
</div>

The style.css

.outer {
  border: 3px solid green;
}
.inner {
  float: left;
  border: 3px solid red;
  width: 50%;
  z-index: 1;
  background-color: #77a8b8ab;
  margin-right: 10px;
  margin-bottom: 10px;
}

The 50% forces the two columns, maybe use a breakpoint on mobile first / small devices to jump back to 100%.

My post was inspirated from SO

Going to one cell inside the grid-x seems to work, coupling that with column: 2; designation in CSS is keeping the content from breaking out in print mode. I could not use the 2 div process you outlined since I am putting dynamic content in the div. I appreciate the help. — Allison, Oct 06 '21 at 19:28

Create Printable Newspaper-like two column layout using Foundation 6 for Sites

$billNum $title $title2 ($firstname $midname $lastname)

Synopsis:

1 Answers1