CODEWITHSUNDEEP
cssgoogle-chrome
Daniela
Daniela

Reputation: 366

css: column-count 3, image floating spanning 2, chrome not playing. why?

I need layout with 3 columns with an image spanning across 2 in top right corner. Found several solutions, best one here: Advanced CSS tricks: How to span an image over multiple columns in a CSS3 site layout?

But: Both don't work with Chrome. The negative top-margin makes the text disappear behind a non discoverable something. I used the solution with the absolute positioning of the floater, as in the other solution the left margin of the floater would be a reason why the text becomes invisible...

I used div#floater to represent the image, has same effect.

HTML:

<div id="outer">

  <div id="floater">
  </div>

  <div id="inner">
    <h1>Title1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h1>Title2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h1>Title3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

</div>

And the CSS code:

#outer{
    position: relative;
    font-size: 10pt;
    width: 100vw;
    min-height: 88vh;
    column-count: 3;
    column-gap: 1vw;
    padding-top: 54vw;
    background-color: red;
  }
#outer #floater{
    position: absolute;
    right: 0;
    top: 0;
    width: 66vw;
    height: 50vw;
    margin-bottom: 2vw;
    display: block;
    border: 2px solid blue;
}
#outer #inner{
    max-width: 100vw;
    background-color: green;
    margin-top: -11vw;
}

I made a fiddle, in Chrome 'Title 1' diappears, in Safari and Firefox no problem. Any suggestions? https://jsfiddle.net/20drzb3k/5/

Upvotes: 1

Views: 99

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105953

You can give a try to backface-visibilty to cure that visual bug.

#outer #inner > *{
    backface-visibility:hidden;
    }

https://jsfiddle.net/20drzb3k/7/

For infos, Here is another example with a different approach (a pseudo element is pulling up first col content. https://codepen.io/gc-nomade/pen/boZaVJ

Upvotes: 1

Related Questions