0

I'm trying to achieve the following layout, where the section on the left is two columns and wraps around a floated element on the top right. The solution I encountered works on Chrome but not Safari.

Does anyone have suggestions on how to accomplish this with cross browser compatibility?

My current solution: https://jsfiddle.net/waverly/62nk2zxv/1/

.col-1 {
  column-count: 2;
}

.description {
  margin-top: 200px;
  padding: 50px 0 50px 50px;
}

.paragraph {
  padding: 0px 0 50px 50px;
}

.col-2 {
  position: relative;
  float: right;
  padding: 50px 0 50px 50px;
}

img {
  max-width: 100%;
}

You can see the live site here (view the "About Us" page) - works on Chrome but not Safari: https://build-kaqexsjtyz.now.sh/

Two col layout wrapping around floated image

TylerH
  • 20,799
  • 66
  • 75
  • 101
Waverly
  • 61
  • 2
  • 7
  • All they are doing is essentially creating a two-column structure using the CSS Columns module. They way they're building the layout in the example site is overly complicated for all the more it's doing. Nothing is actually "wrapping" around the image. Why not just build a true two column structure? That's very easy to do cross-browser. The issue with CSS columns in my experience is that different browsers will wrap elements to the next column at "earlier or later points" ultimately presenting different results. Adding a float to the mix certainly doesn't help in getting a predictable layout. – BSK Mar 15 '18 at 16:57
  • @BSK the issue is that the text has to wrap around the image - if the screen gets larger or smaller, the image can't move to the first column. The image should always be at the top right of the second column until the layout breaks into a single column for mobile. – Waverly Mar 15 '18 at 17:01
  • the only way to get text to wrap like that into 2 columns responsively is by using css columns, but as you have stated you want the image to remain at the top of the second column, this is not possible with css alone (unless you can get the break after to always break after some span that is before the image) – Pete Mar 15 '18 at 17:05
  • Here's my attempt but as you can see, because of the `break-before`, it means the columns are uneven https://jsfiddle.net/62nk2zxv/12/ – Pete Mar 15 '18 at 17:18

0 Answers0