I'm trying to make a slider layout, a block with a picture and inside it there are buttons pressed along the edges, that I can use a float , is there a better way.

My example

 .slider { height: 300px; width: 400px; border: 1px solid black; } .arrow { height: 100%; width: 50px; border: 1px solid black; float: left; } .right-arrow { float: right; } 
 <div class="slider"> <div class="arrow left-arrow"> </div> <div class="arrow right-arrow"> </div> </div>

Thank you in advance.

    1 answer 1

    Use flexbox with a distribution of elements in width ( justify-content: space-between ), where the first element is pressed to the left and the last to the right. In your case, there are 2 nested blocks, so it will work as you need.

    Example flexbox and justify-content: space-between

     .slider { height: 300px; width: 300px; outline: 1px solid black; display: flex; justify-content: space-between; } .arrow { height: 100%; width: 50px; border: 1px solid black; } 
     <div class="slider"> <div class="arrow left-arrow"> </div> <div class="arrow right-arrow"> </div> </div>