Looking to incorporate a line with tick marks and a ball (similar to a scale) into my design.
Some tutorials recommend using absolute positioning or float for this effect. While these methods work partially, I've noticed that the divs tend to shift out of place when the screen size is changed.
.line {
width: 100%;
min-height: 5px;
background-color: black;
padding: 20px;
margin-top: 20%;
}
.point {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
border: solid 21px #f00;
width: 50px;
height: 50px;
background-color: red;
float: right;
overflow: visible;
position: relative;
z-index: 1000;
padding: 20px;
margin-top: -15%;
}<div class="line"></div>
<div class="point"></div>