Positioning buttons on the sides of the view CSS - css

Question

I am trying to place a pair of buttons in line of the divs storing images on sides.
Currently i got this but it is not quite what i want:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: darkgrey;
height: 100vh;
margin: 0;
/* for centering block both horizontally and vertically */
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
/*maximum 3 items, (320px + 2px border + 0.5rem margin-left + 0.5rem margin-right) � 3 */
max-width: calc(325.33px * 3 + 0.5rem * 6);
}
.wrapper > div {
margin: 0.5rem;
}
img {
width: 323.33px;
max-height: 100%;
}
.border {
border: 1px solid #fff;
position: relative;
}
.txt {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
color: white;
}
#media (max-width: 750px) {
.border {
width: calc(50% - 2rem);
}
.border > img {
width: 100%;
}
}
.left {
float: left;
text-align: center;
display: inline-block;
vertical-align: middle;
width: 3.5em;
height: 3.5em;
background: white;
border-radius: 50%;
margin-left: 1.5em;
}
.left:after {
border-radius: 4px;
content: '';
display: inline-block;
margin-top: 0.85em;
margin-left: 0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.6em solid #333;
border-right: 0.6em solid #333;
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.right {
float: right;
text-align: center;
display: inline-block;
vertical-align: middle;
width: 3.5em;
height: 3.5em;
background: white;
border-radius: 50%;
margin-right: 1.5em;
}
.right:after {
border-radius: 4px;
content: '';
display: inline-block;
margin-top: 0.85em;
margin-left: -0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.6em solid #333;
border-right: 0.6em solid #333;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<div>
<span class='left' ></span>
<span class= 'right'></span>
<div class="wrapper">
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c119.0.842.842/18299802_1402951239794126_7834789447697694720_n.jpg">
<div class="txt">div text 1</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/17332427_1876651042606993_1501112703702269952_n.jpg">
<div class="txt">div text 2</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c84.0.912.912/16583397_677753229099565_4518661686835544064_n.jpg">
<div class="txt">Omelette du fromage</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/16230268_1353432401412243_430046279255457792_n.jpg">
<div class="txt">How you doin?</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c0.45.1080.1080/14547823_248508785596143_6915357097039233024_n.jpg">
<div class="txt">div text 5</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/15801844_242832729497192_6894626767370190848_n.jpg">
<div class="txt">div text 6</div>
</div>
</div>
</div>
Click "Full page" to get a better view of the snippet.
I tried to use
float with margins but it doesn't work very well:
This is what i am trying to achieve:
Is it possible to change position of those buttons without changing what is inside div with class called wrapper? It would break positioning of those divs. If it was possible to resize buttons with divs in line that would be great!

Answer 1

removed display flex from body
2.
.right {
/* float: right; */ instead of using thing use left: 0;
text-align: center;
display: inline-block;
/* vertical-align: middle; */ not needed
width: 3.5em;
height: 3.5em;
background: white;
border-radius: 50%;
right: 0;
/* margin-top: 50%; */ instead of this, use top: 50% or top: 100%
position: absolute; needs to be absolute pos
top: 100%;
transform: translateY(-50%); this centers the buttons vertically
}
3.
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
padding: 0 48px;
}
Working:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: darkgrey;
height: 100vh;
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
/*maximum 3 items, (320px + 2px border + 0.5rem margin-left + 0.5rem margin-right) � 3 */
width: 100%;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
padding: 0 48px;
}
img {
width: 323.33px;
max-height: 100%;
}
.border {
border: 1px solid #fff;
position: relative;
}
.txt {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
color: white;
}
#media (max-width: 750px) {
.border {
width: calc(50% - 2rem);
}
.border > img {
width: 100%;
}
}
.left {
/* float: right; */
text-align: center;
display: inline-block;
/* vertical-align: middle; */
width: 3.5em;
height: 3.5em;
background: white;
border-radius: 50%;
left: 0;
/* margin-top: 50%; */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left:after {
border-radius: 4px;
content: '';
display: inline-block;
margin-top: 0.85em;
margin-left: 0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.6em solid #333;
border-right: 0.6em solid #333;
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.right {
/* float: right; */
text-align: center;
display: inline-block;
/* vertical-align: middle; */
width: 3.5em;
height: 3.5em;
background: white;
border-radius: 50%;
right: 0;
/* margin-top: 50%; */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.right:after {
border-radius: 4px;
content: '';
display: inline-block;
margin-top: 0.85em;
margin-left: -0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.6em solid #333;
border-right: 0.6em solid #333;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<div>
<span class='left' ></span>
<span class= 'right'></span>
<div class="wrapper">
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c119.0.842.842/18299802_1402951239794126_7834789447697694720_n.jpg">
<div class="txt">div text 1</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/17332427_1876651042606993_1501112703702269952_n.jpg">
<div class="txt">div text 2</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c84.0.912.912/16583397_677753229099565_4518661686835544064_n.jpg">
<div class="txt">Omelette du fromage</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/16230268_1353432401412243_430046279255457792_n.jpg">
<div class="txt">How you doin?</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c0.45.1080.1080/14547823_248508785596143_6915357097039233024_n.jpg">
<div class="txt">div text 5</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/15801844_242832729497192_6894626767370190848_n.jpg">
<div class="txt">div text 6</div>
</div>
</div>
</div>