CSS column element inside bug - html

Question

I used column-count, but it looks like I found a bug when an element has an absolute position and overflowed from the parent.
#master {
column-count: 2;
}
.Books {
display: table;
column-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
JSFiddle
There are two issues. One, the two red elements are not balanced (see the purple line) and second, the red element dropped on the bottom.

Answer 1

Just add margin-top: -1px; in the .bookmarkAds class.
And margin-top: 10px; in .books class .
#master {
column-count: 2;
}
#rule {
position: absolute;
width: 100%;
height: 1px;
background: #9C27B0;
top: 7px;
left: 0;
}
.Books {
width: 100%;
font-family: tahoma;
font-size: 12px;
border: 1px solid #ddd;
line-height: 150%;
background: #FFFFF6;
float: right;
box-sizing: border-box;
padding: 5px 5px 10px 5px;
margin: 3px;
margin-top: 10px;
position: relative;
display: table;
column-break-inside: avoid;
-webkit-column-break-inside: avoid;
min-height: 200px;
}
.bookmarkAds {
margin-top: -1px;
position: absolute;
left: 4px;
color: #9e9e9e;
cursor: pointer;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.30);
top: -10px;
font-size: 22px;
background: red;
}
<div id="rule"></div>
<div id="master">
<div class="Books">
<div id="Bookmark" class="bookmarkAds RedHeart" title="" data-id="653373">x</div>
Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus sed, vestibulum mauris porttitor ipsum nostra tellus, bibendum aliquam nibh, libero elementum ut suspendisse ante dolor sit, erat quis tellus iaculis mauris sed. Nam fusce hac in metus facilisis, dictum urna nulla nulla, metus porttitor donec irure facilisis, curabitur sed id sapien gravida, eu a dolor autem et. Varius sollicitudin odio ut, eget maecenas, lacinia lobortis adipiscing id praesent orci varius, bibendum euismod tenetur pellentesque, in justo et massa nisl. Odio quis eget mauris dui consectetuer, lorem mi quis mollis arcu, ullamcorper lobortis sem, cras urna lacus sed eu. Nec taciti aliquet, praesent risus rutrum ac, sagittis eu. Sit id a, vel ultrices parturient etiam magna at. Phasellus hendrerit lacinia ac eros.
</div>
<div class="Books">
<div id="Bookmark" class="bookmarkAds RedHeart" title="" data-id="653373">x</div>
Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus sed, vestibulum mauris porttitor ipsum nostra tellus, bibendum aliquam nibh, libero elementum ut suspendisse ante dolor sit, erat quis tellus iaculis mauris sed. Nam fusce hac in metus facilisis, dictum urna nulla nulla, metus porttitor donec irure facilisis, curabitur sed id sapien gravida, eu a dolor autem et. Varius sollicitudin odio ut, eget maecenas, lacinia lobortis adipiscing id praesent orci varius, bibendum euismod tenetur pellentesque, in justo et massa nisl. Odio quis eget mauris dui consectetuer, lorem mi quis mollis arcu, ullamcorper lobortis sem, cras urna lacus sed eu. Nec taciti aliquet, praesent risus rutrum ac, sagittis eu. Sit id a, vel ultrices parturient etiam magna at. Phasellus hendrerit lacinia ac eros.
Lorem ipsum dolor sit amet, duis mattis pharetra vehicula nec phasellus sed, vestibulum mauris porttitor ipsum nostra tellus, bibendum aliquam nibh, libero elementum ut suspendisse ante dolor sit, erat quis tellus iaculis mauris sed. Nam fusce hac in metus facilisis, dictum urna nulla nulla, metus porttitor donec irure facilisis, curabitur sed id sapien gravida, eu a dolor autem et. Varius sollicitudin odio ut, eget maecenas, lacinia lobortis adipiscing id praesent orci varius, bibendum euismod tenetur pellentesque, in justo et massa nisl. Odio quis eget mauris dui consectetuer, lorem mi quis mollis arcu, ullamcorper lobortis sem, cras urna lacus sed eu. Nec taciti aliquet, praesent risus rutrum ac, sagittis eu. Sit id a, vel ultrices parturient etiam magna at. Phasellus hendrerit lacinia ac eros.
</div>
</div>

Answer 2

This is the way column-count works. Add margin-top: 10px; to your .Books class and the issue will be fixed. Like this: https://jsfiddle.net/x6ms3nxr/5/
Red element dropped to the bottom is actually a part of bookmark from second column that is cut and gone to the first column.
Some additional details regarding columns support in browsers can be found here:
http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/