Div исчезает под другим div

Question

Извините за неопределенное название, но у меня есть проблема, из-за которой я не смог найти исправление. Я пытаюсь создать сайт с двумя столбцами с столбцами равной длины. Я слежу за this tutorial и в основном работает, но одна часть ломается. Содержимое правого столбца исчезает под фоном. Мои извинения заранее, я действительно новичок в этом.

контейнер внизу содержит всю страницу; Заголовок, Nav, Контент и нижний колонтитул. Если вам нужна остальная часть кода, дайте мне знать. Веб-страницу в действии может быть просмотрена here;

#container { 
 
    float: left; 
 
    margin-left: 5px; 
 
    width: 1023px; 
 
    height: 100%; 
 
} 
 
#containerLeft { 
 
    float: left; 
 
    background: #fff; 
 
    width: 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
    right: 24%; 
 
    height: 100%; 
 
} 
 
#containerRight { 
 
    float: left; 
 
    background: #e7e1d7; 
 
    width: 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 
#rightContent { 
 
    float: left; 
 
    width: 24%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    z-index: 5; 
 
} 
 
#leftContent { 
 
    float: left; 
 
    width: 76%; 
 
    position: relative; 
 
    overflow: hidden; 
 
}

<div id="containerRight"> 
 
    <div id="containerLeft"> 
 

 
    <div id="rightContent"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu enim, laoreet nec orci sed, sagittis condimentum libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut tempus tellus nisi, ut bibendum quam eleifend nec. Integer 
 
     semper eu dui id vestibulum. Mauris porttitor ullamcorper laoreet. Integer non nunc sit amet tortor porta bibendum vel sed enim. Maecenas elit mauris, consectetur mollis varius vitae, dignissim non purus. Lorem ipsum dolor sit amet, consectetur 
 
     adipiscing elit. Phasellus eu ligula ligula. Nulla posuere quis nisl sed tincidunt. Praesent vel nisi orci. Pellentesque congue vel enim eu pulvinar. Vivamus massa ante, malesuada eget rutrum varius, placerat ut arcu. Pellentesque rutrum lacinia 
 
     ex sit amet sollicitudin.</p> 
 

 
     <p>Integer rhoncus, enim eu iaculis commodo, nulla arcu porta tortor, a pellentesque ante justo ut nisi. Donec ex libero, consequat at ligula vitae, sodales maximus eros. Aenean feugiat porttitor dui a cursus. Aliquam aliquam et sapien a auctor. Suspendisse 
 
     placerat sem quis dui feugiat accumsan. Maecenas ultrices sagittis augue, et dictum sem imperdiet quis. In purus nisl, interdum ac dolor vitae, eleifend hendrerit justo. Nullam facilisis, orci in fermentum condimentum, velit diam pulvinar magna, 
 
     ut ornare nibh nunc vel sapien. Phasellus aliquet massa justo, a eleifend diam pharetra vel. Integer sem dui, elementum eget orci eget, feugiat feugiat velit. Aenean eget dapibus metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
 
     posuere cubilia Curae; Etiam efficitur ipsum nisl, eu hendrerit tellus ultricies sit amet. Donec pulvinar interdum ante, in malesuada lacus consequat vel. Aliquam commodo tellus vel metus accumsan facilisis. Nulla facilisi.</p> 
 

 
     <p>Nulla facilisi. Donec vitae gravida orci, vitae sollicitudin nisl. Sed sed metus risus. Donec porttitor, augue quis elementum pellentesque, libero arcu pretium est, ut placerat enim quam nec quam. Nam vel mauris dapibus, commodo nibh ac, cursus 
 
     eros. Curabitur tristique mauris nec justo laoreet laoreet. Nam nisi elit, fermentum eu egestas sollicitudin, molestie sed diam. Nulla at quam nec purus varius scelerisque non eget augue. In quis ex ac felis iaculis lobortis at vel sem. Ut luctus 
 
     quam ac blandit sodales. Etiam sodales arcu eu tellus interdum mollis. Integer feugiat dui quis magna scelerisque, vel fringilla nulla aliquam. Fusce et rhoncus libero. Aliquam nibh nunc, consectetur et ipsum sit amet, vulputate hendrerit sapien. 
 
     Sed orci elit, euismod in libero nec, ornare feugiat erat.</p> 
 

 
     <p>Suspendisse potenti. Morbi consectetur, dui eu rutrum luctus, dui diam laoreet ex, ut fermentum enim eros at urna. Nulla at luctus tortor, quis euismod libero. Cras sodales augue at dui fermentum facilisis. Nullam vehicula sapien semper neque euismod, 
 
     non convallis sem iaculis. Cras ultricies convallis ex, nec varius tellus consectetur ut. Maecenas efficitur vestibulum est at ultrices. Nulla sit amet est iaculis, fringilla justo a, suscipit orci. Etiam rutrum auctor bibendum. Donec molestie 
 
     diam at lacus eleifend lacinia. Proin sit amet enim elementum, egestas odio quis, euismod nibh. In hac habitasse platea dictumst. Ut quis ante id elit semper aliquam. Aliquam a tempus justo. Aenean finibus nulla augue, eget dictum magna congue 
 
     at.</p> 
 

 
     <p>Praesent nisl neque, rutrum non mauris et, hendrerit iaculis odio. Fusce nisi elit, ultrices rhoncus magna nec, pulvinar luctus ex. Mauris id ante eget arcu suscipit efficitur. Aliquam imperdiet lectus ante, eget laoreet metus mollis ut. Praesent 
 
     volutpat suscipit arcu, at finibus dolor. Sed vitae pulvinar mi, quis condimentum justo. Donec sed tincidunt justo. Mauris non semper justo. Sed facilisis libero eget lorem gravida, ac consectetur eros pulvinar.</p> 
 
    </div> 
 

 
    <div id="leftContent"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu enim, laoreet nec orci sed, sagittis condimentum libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut tempus tellus nisi, ut bibendum quam eleifend nec. Integer 
 
     semper eu dui id vestibulum. Mauris porttitor ullamcorper laoreet. Integer non nunc sit amet tortor porta bibendum vel sed enim. Maecenas elit mauris, consectetur mollis varius vitae, dignissim non purus. Lorem ipsum dolor sit amet, consectetur 
 
     adipiscing elit. Phasellus eu ligula ligula. Nulla posuere quis nisl sed tincidunt. Praesent vel nisi orci. Pellentesque congue vel enim eu pulvinar. Vivamus massa ante, malesuada eget rutrum varius, placerat ut arcu. Pellentesque rutrum lacinia 
 
     ex sit amet sollicitudin.</p> 
 

 
     <p>Integer rhoncus, enim eu iaculis commodo, nulla arcu porta tortor, a pellentesque ante justo ut nisi. Donec ex libero, consequat at ligula vitae, sodales maximus eros. Aenean feugiat porttitor dui a cursus. Aliquam aliquam et sapien a auctor. Suspendisse 
 
     placerat sem quis dui feugiat accumsan. Maecenas ultrices sagittis augue, et dictum sem imperdiet quis. In purus nisl, interdum ac dolor vitae, eleifend hendrerit justo. Nullam facilisis, orci in fermentum condimentum, velit diam pulvinar magna, 
 
     ut ornare nibh nunc vel sapien. Phasellus aliquet massa justo, a eleifend diam pharetra vel. Integer sem dui, elementum eget orci eget, feugiat feugiat velit. Aenean eget dapibus metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
 
     posuere cubilia Curae; Etiam efficitur ipsum nisl, eu hendrerit tellus ultricies sit amet. Donec pulvinar interdum ante, in malesuada lacus consequat vel. Aliquam commodo tellus vel metus accumsan facilisis. Nulla facilisi.</p> 
 

 
     <p>Nulla facilisi. Donec vitae gravida orci, vitae sollicitudin nisl. Sed sed metus risus. Donec porttitor, augue quis elementum pellentesque, libero arcu pretium est, ut placerat enim quam nec quam. Nam vel mauris dapibus, commodo nibh ac, cursus 
 
     eros. Curabitur tristique mauris nec justo laoreet laoreet. Nam nisi elit, fermentum eu egestas sollicitudin, molestie sed diam. Nulla at quam nec purus varius scelerisque non eget augue. In quis ex ac felis iaculis lobortis at vel sem. Ut luctus 
 
     quam ac blandit sodales. Etiam sodales arcu eu tellus interdum mollis. Integer feugiat dui quis magna scelerisque, vel fringilla nulla aliquam. Fusce et rhoncus libero. Aliquam nibh nunc, consectetur et ipsum sit amet, vulputate hendrerit sapien. 
 
     Sed orci elit, euismod in libero nec, ornare feugiat erat.</p> 
 

 
     <p>Suspendisse potenti. Morbi consectetur, dui eu rutrum luctus, dui diam laoreet ex, ut fermentum enim eros at urna. Nulla at luctus tortor, quis euismod libero. Cras sodales augue at dui fermentum facilisis. Nullam vehicula sapien semper neque euismod, 
 
     non convallis sem iaculis. Cras ultricies convallis ex, nec varius tellus consectetur ut. Maecenas efficitur vestibulum est at ultrices. Nulla sit amet est iaculis, fringilla justo a, suscipit orci. Etiam rutrum auctor bibendum. Donec molestie 
 
     diam at lacus eleifend lacinia. Proin sit amet enim elementum, egestas odio quis, euismod nibh. In hac habitasse platea dictumst. Ut quis ante id elit semper aliquam. Aliquam a tempus justo. Aenean finibus nulla augue, eget dictum magna congue 
 
     at.</p> 
 

 
     <p>Praesent nisl neque, rutrum non mauris et, hendrerit iaculis odio. Fusce nisi elit, ultrices rhoncus magna nec, pulvinar luctus ex. Mauris id ante eget arcu suscipit efficitur. Aliquam imperdiet lectus ante, eget laoreet metus mollis ut. Praesent 
 
     volutpat suscipit arcu, at finibus dolor. Sed vitae pulvinar mi, quis condimentum justo. Donec sed tincidunt justo. Mauris non semper justo. Sed facilisis libero eget lorem gravida, ac consectetur eros pulvinar.</p> 
 
    </div> 
 
    </div> 
 
</div>

Как вы можете видеть, я попытался с помощью Z-индекс, но он не явился на работу. Я также попробовал поля и дополнения, но это полностью сломало вещи, и влево/вправо, как указано в учебнике, ничего полезного не было.

Answer 1

Вот код, который вам нужен для размещения двух столбцов. Вы сделали несколько ошибок:

• Ваш первый containerLeft не нужен height: 100% и position: relative;.
• Ваш второй containerRight не нужен height: 100%.
• Вам просто нужно два containers, так как у вас только 2 столбца.
• Проверьте код, чтобы узнать, как рассчитать ширину столбцов с помощью left и right.

Однако убедитесь, что вам нужен такой макет (имеющий равную высоту столбцов), потому что это много дополнительного кода для макета. Вы также можете проверить эту статью для дополнительных методов в зависимости от поддержки браузера вам необходимо: http://css-tricks.com/fluid-width-equal-height-columns/

Проверьте исправленный код ниже:

.header { 
 
    background-color: AliceBlue; 
 
} 
 
.footer { 
 
    clear: both; 
 
    background-color: Beige; 
 
} 
 
#containerLeft { 
 
    clear: left; 
 
    float: left; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background-color: #999; 
 
} 
 
#containerRight { 
 
    float: left; 
 
    width: 100%; 
 
    position: relative; 
 
    right: 24%; /* this will make your right column 24% width */ 
 
    background-color: #e4e4e4; 
 
} 
 
#leftContent { 
 
    float: left; 
 
    width: 68%; /* Your left container is now 100% - 24% (containerRight) = 76%. I have included a padding of 8% to make your content breathe so 76% - 8% = 68% */ 
 
    position: relative; 
 
    left: 28%; /* Your content in your left container will start at 100% - 76% (left container width) = 24%. I have included a paading-left of 4% which makes it 24 + 4 = 28% */ 
 
    overflow: hidden; 
 
} 
 
#rightContent { 
 
    float: left; 
 
    width: 20%; /* Your right column width is 24% and I have included a 4% padding so 24 - 4 = 20% */ 
 
    position: relative; 
 
    left: 34%; /* Your content will start at 100% - 68% (width of leftContent) = 32%. I have included a 2% padding so 32 + 2 = 34% */ 
 
    overflow: hidden; 
 
}

<section class="header"> 
 
    <div class="banner"> 
 
    Your banner 
 
    </div> 
 
    <nav> 
 
    Your nav 
 
    </nav> 
 
</section> 
 

 
<section class="main"> 
 
    <div id="containerLeft"> 
 
    <div id="containerRight"> 
 
     <div id="leftContent"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     <div id="rightContent"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p> 
 
     </div> 
 
    </div> 
 
    <!-- /end container2 --> 
 
    </div> 
 
    <!-- /end container1 --> 
 
</section> 
 

 
<section class="footer"> 
 
    Your footer 
 
</section>