CODEWITHSUNDEEP
htmlcss
sam
sam

Reputation: 1087

CSS column-count and position relative behavior in Chrome

If I use a position relative for an item which is inside column-count, it does not appear in Chrome (latest version).

In the following code, .left has the position: relative and it does not appear.

How can I make it work without removing the relative position property?

HTML:

<div class="container">                
    <div class="box">Lorem ipsum dolor sit amet</div>

    <div class="box">
        <div class="item">
            <div class="left"><img src="http://i.imgur.com/E4rkDHN.jpg" /></div>
            <div class="right">luctus et ultrices posuere cubilia Curae</div>
        </div>
    </div>
<div>

CSS:

.container {
    width: 500px;
    overflow: hidden;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

.box {
    width: 240px;
    overflow: hidden; 
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    column-break-inside: avoid;
    -webkit-backface-visibility: hidden;
    margin-bottom: 20px;
    background: yellow;    
}

.left {
    position: relative;
}

Demo: http://jsfiddle.net/eLmhedrt/

Upvotes: 3

Views: 1426

Answers (2)

user3497034
user3497034

Reputation:

I just changed as following and now image is displaying

.left {
    position: relative;
    margin:2px ;
}

Upvotes: 1

Mario Kurzweil
Mario Kurzweil

Reputation: 480

Just add the position: relative; to img, like this:

img{
  position: relative;
}

You can also check it on jsfiddle. I hope it helps you :)

Upvotes: 2

Related Questions