Div disappearing under another div - html

Question

Sorry for the vague title, but I have an issue that I've been unable to find a fix to. I'm trying to create a 2 column website with equal length columns. I've been following this tutorial and it is mostly working but one part breaks. The content of the right hand column is disappearing under the background. My apologies beforehand, I'm really new to this.
container below contains the entire page; Header, Nav, Content and footer. If you need the rest of the code, let me know. The webpage in operation can be viewed 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>
As you can see, I tried using z-index but it didn't appear to work. I also tried margins and padding, but that broke things entirely, and left/right as directed in the tutorial didn't do anything useful.

Answer 1

Here is the code you need for your 2 columns layout. You made several mistakes:
Your first containerLeft doesn't need an height: 100% and position: relative;.
Your second containerRight doesn't need an height: 100%.
You just need two containers as you only have 2 columns.
Check the code to see how to calculate the width of your columns with left and right.
However, make sure you do need this kind of layout (having equal columns height) because this is a lot of extra code for a layout. You can also check this article for extra techniques depending on the browser support you need: http://css-tricks.com/fluid-width-equal-height-columns/
Check the corrected code below:
.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>