Responsive div expand over another div - html

Question

I have a page with a container holding a div and within that there are two more divs, side by side. As the view gets smaller, I want the div on the right to disappear and the div on the left to take up the entire parent div.
I've been having problems implementing this. When I tried an absolute position on the div it does expand to the fill width of the parent but it also pops out of the parent (sort of). When I tried a transition as was suggested elsewhere that just didn't do anything useful. Then I tried z-index and changing the margin to a - but that didn't seem to work either. A nudge in the right direction would be great.
.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>

Answer 1

You could do something like this, using display:table-row and overflow:hidden. Fiddle
.box, .whiteBoxHalf {
min-width: 300px;
}
.box {
background-color: #F28B20;
border-radius: 5px;
margin-bottom: 150px;
width: 80%;
box-shadow: 10px 10px 5px #888888;
overflow: hidden;
}
.row {
display: table-row;
}
.sidebar {
display: table-cell;
margin-left: 0;
margin-right: 3%;
text-align: left;
color: #171581;
background: green;
}
.whiteBoxHalf {
display: table-cell;
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;
width: 60%;
box-sizing: border-box;
}
<div class="box">
<div class="row">
<div class="whiteBoxHalf">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque consequat porta. Praesent a odio lorem. Donec scelerisque mauris nibh, ut finibus ipsum semper eget. Praesent dapibus ante et diam condimentum tempus. Vivamus nisl nisl, finibus in neque non, maximus pretium est. In hac habitasse platea dictumst. Quisque dapibus faucibus nisl. Donec vel tincidunt est, blandit imperdiet eros. Integer blandit finibus vestibulum. Mauris vel ante quis neque congue ullamcorper in vitae quam. Morbi pretium elementum ante, eget suscipit enim elementum sit amet. Integer ornare, risus euismod tincidunt lobortis, arcu ligula lobortis lectus, in egestas est quam sed massa. Etiam porta, neque eget cursus gravida, sem nisl convallis erat, ut pharetra felis ex ac odio. Nunc aliquam enim quis nulla auctor suscipit. Maecenas id enim eu purus hendrerit interdum nec id est.
</p>
</div>
<div class="sidebar">
<p>
Praesent sem tortor, volutpat at volutpat lobortis, luctus eget tellus. Nulla facilisi. Vestibulum sodales mauris non sapien volutpat hendrerit. Curabitur quis vestibulum nulla. Pellentesque justo risus, vestibulum ac ligula eu, interdum lacinia lorem. Sed ornare libero nunc. Morbi vitae fringilla ipsum. Nulla tempor viverra odio eget ultrices. Etiam fermentum erat viverra ex rhoncus, eget lacinia arcu semper. Aliquam lobortis massa ac tincidunt vestibulum. Nam ex ligula, molestie vel luctus eu, pretium quis lacus. Cras tincidunt nisl nec viverra condimentum.
</p>
</div>
</div>
</div>
If this is not the desired behaviour, you will probably want to use media queries to target specific screen resolutions, and show/hide the sidebar accordingly. Example:
.sidebar {
display: none;
}
#media (min-width: 800px) {
.sidebar {
display: block;
}
}