Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fragmentation of relatively positioned element</title>
</head>
<body>
<div id="multicol">
  <div>
    1<br>
    2<br>
    3<br>
    4<br>
    5<br>
    6<br>
    7<br>
    8<br>
    9<br>
    10<br>
    11<br>
    12<br>
    13<br>
    14<br>
    15<br>
    16<br>
    17<br>
    18<br>
    19<br>
    20<br>
    21<br>
    22<br>
    23<br>
    24<br>
    25<br>
    26<br>
    27<br>
    28<br>
    29<br>
    30
  </div>
</div>
</body>
</html>
 
* {
    margin: 0;
}
html {
    orphans: 1;
    widows: 1;
}
#multicol {
    background: #EEEEEE;
    margin: 20px;
    height: 500px;
    width: 1000px;
    -moz-column-width: 20em;
    -webkit-column-width: 20em;
    column-width: 20em;
    -moz-column-rule: 1px black solid;
    -webkit-column-rule: 1px black solid;
    column-rule: 1px black solid;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
}
div > div {
    background-color: #CCFFCC;
    line-height: 50px;
    position: relative;
    top: 50px;
    left: 5px;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
frivoalpro
0viewers