I am struggling to make a div on the right disappear as the view gets smaller, leaving the left div to take up the entire parent container. I have tried using absolute positioning but it causes the div to pop out of the parent. Transition and z-index did not work either. Any suggestions?
.box {
background-color: #F28B20;
border-radius: 5px;
height: auto;
margin-bottom: 150px;
width: 80%;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
background-image: url("../Images/logo_faded_background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.sidebar {
float: right;
width: 29%;
margin-left: 0;
margin-right: 3%;
text-align: left;
color: #171581;
}
.whiteBoxHalf {
float: left;
width: 54%;
background: rgba(255, 255, 255, 0.6);
border-color: #000000;
border-width: 1px;
border-style: solid;
margin-left: 3%;
margin-right: 5%;
margin-bottom: 15px;
padding: 15px;
}
@media (max-width: 1019px) {
.header {
font-size: small;
}
.header li a {
padding: 20px 10px;
}
.sidebar {
display: none;
}
.whiteBoxHalf {
width: 95%;
}
}<div class="box">
<div class="row">
<div class="whiteBoxHalf"></div>
<div class="sidebar"></div>
</div>
</div>