Ответственный div разворачивается над другим div

Question

У меня есть страница с контейнером, держащим div и внутри которого есть еще два divs, бок о бок. Поскольку представление становится меньше, я хочу, чтобы div справа исчезал, а div слева - весь родительский div. У меня возникли проблемы с этим. Когда я пробовал абсолютную позицию в div, он расширяется до ширины заполнения родителя, но также выплывает из родителя (вроде). Когда я попробовал переход, как было предложено в другом месте, просто ничего не полезного. Затем я попробовал z-index и изменил маржу на a, но это тоже не сработало. Толчок в правильном направлении был бы велик.

.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

Вы могли бы сделать что-то вроде этого, используя display:table-row и 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>

Если это не желаемое поведение, вы, вероятно, захотите использовать медиа-запросы для решения конкретных разрешений экрана и показать/скрыть боковую панель соответственно. Пример:

.sidebar { 
    display: none; 
} 
@media (min-width: 800px) { 
    .sidebar { 
     display: block; 
    } 
}