html - Div disappearing under another div -

html - Div disappearing under another div -

sorry vague title, have issue i've been unable find prepare to. i'm trying create 2 column website equal length columns. i've been next this tutorial , working 1 part breaks. content of right hand column disappearing under background. apologies beforehand, i'm new this.

container below contains entire page; header, nav, content , footer. if need rest of code, allow me know. webpage in operation can viewed here;

class="snippet-code-css lang-css prettyprint-override">#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; } class="snippet-code-html lang-html prettyprint-override"><div id="containerright"> <div id="containerleft"> <div id="rightcontent"> <p>lorem ipsum dolor sit down 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 european union dui id vestibulum. mauris porttitor ullamcorper laoreet. integer non nunc sit down amet tortor porta bibendum vel sed enim. maecenas elit mauris, consectetur mollis varius vitae, dignissim non purus. lorem ipsum dolor sit down amet, consectetur adipiscing elit. phasellus european union ligula ligula. nulla posuere quis nisl sed tincidunt. praesent vel nisi orci. pellentesque congue vel enim european union pulvinar. vivamus massa ante, malesuada eget rutrum varius, placerat ut arcu. pellentesque rutrum lacinia ex sit down amet sollicitudin.</p> <p>integer rhoncus, enim european union iaculis commodo, nulla arcu porta tortor, pellentesque ante justo ut nisi. donec ex libero, consequat @ ligula vitae, sodales maximus eros. aenean feugiat porttitor dui cursus. aliquam aliquam et sapien 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, 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, european union hendrerit tellus ultricies sit down 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 european union egestas sollicitudin, molestie sed diam. nulla @ quam nec purus varius scelerisque non eget augue. in quis ex ac felis iaculis lobortis @ vel sem. ut luctus quam ac blandit sodales. etiam sodales arcu european union tellus interdum mollis. integer feugiat dui quis magna scelerisque, vel fringilla nulla aliquam. fusce et rhoncus libero. aliquam nibh nunc, consectetur et ipsum sit down amet, vulputate hendrerit sapien. sed orci elit, euismod in libero nec, ornare feugiat erat.</p> <p>suspendisse potenti. morbi consectetur, dui european union rutrum luctus, dui diam laoreet ex, ut fermentum enim eros @ urna. nulla @ luctus tortor, quis euismod libero. cras sodales augue @ 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 @ ultrices. nulla sit down amet est iaculis, fringilla justo a, suscipit orci. etiam rutrum auctor bibendum. donec molestie diam @ lacus eleifend lacinia. proin sit down amet enim elementum, egestas odio quis, euismod nibh. in hac habitasse platea dictumst. ut quis ante id elit semper aliquam. aliquam 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, @ 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 down 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 european union dui id vestibulum. mauris porttitor ullamcorper laoreet. integer non nunc sit down amet tortor porta bibendum vel sed enim. maecenas elit mauris, consectetur mollis varius vitae, dignissim non purus. lorem ipsum dolor sit down amet, consectetur adipiscing elit. phasellus european union ligula ligula. nulla posuere quis nisl sed tincidunt. praesent vel nisi orci. pellentesque congue vel enim european union pulvinar. vivamus massa ante, malesuada eget rutrum varius, placerat ut arcu. pellentesque rutrum lacinia ex sit down amet sollicitudin.</p> <p>integer rhoncus, enim european union iaculis commodo, nulla arcu porta tortor, pellentesque ante justo ut nisi. donec ex libero, consequat @ ligula vitae, sodales maximus eros. aenean feugiat porttitor dui cursus. aliquam aliquam et sapien 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, 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, european union hendrerit tellus ultricies sit down 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 european union egestas sollicitudin, molestie sed diam. nulla @ quam nec purus varius scelerisque non eget augue. in quis ex ac felis iaculis lobortis @ vel sem. ut luctus quam ac blandit sodales. etiam sodales arcu european union tellus interdum mollis. integer feugiat dui quis magna scelerisque, vel fringilla nulla aliquam. fusce et rhoncus libero. aliquam nibh nunc, consectetur et ipsum sit down amet, vulputate hendrerit sapien. sed orci elit, euismod in libero nec, ornare feugiat erat.</p> <p>suspendisse potenti. morbi consectetur, dui european union rutrum luctus, dui diam laoreet ex, ut fermentum enim eros @ urna. nulla @ luctus tortor, quis euismod libero. cras sodales augue @ 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 @ ultrices. nulla sit down amet est iaculis, fringilla justo a, suscipit orci. etiam rutrum auctor bibendum. donec molestie diam @ lacus eleifend lacinia. proin sit down amet enim elementum, egestas odio quis, euismod nibh. in hac habitasse platea dictumst. ut quis ante id elit semper aliquam. aliquam 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, @ 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 can see, tried using z-index didn't appear work. tried margins , padding, broke things entirely, , left/right directed in tutorial didn't useful.

here code need 2 columns layout. made several mistakes:

your first containerleft doesn't need height: 100% , position: relative;. your sec containerright doesn't need height: 100%. you need 2 containers have 2 columns. check code see how calculate width of columns left , right.

however, create sure need kind of layout (having equal columns height) because lot of code layout. can check article techniques depending on browser back upwards need: http://css-tricks.com/fluid-width-equal-height-columns/

check corrected code below:

class="snippet-code-css lang-css prettyprint-override">.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%; /* create right column 24% width */ background-color: #e4e4e4; } #leftcontent { float: left; width: 68%; /* left container 100% - 24% (containerright) = 76%. have included padding of 8% create content breathe 76% - 8% = 68% */ position: relative; left: 28%; /* content in left container start @ 100% - 76% (left container width) = 24%. have included paading-left of 4% makes 24 + 4 = 28% */ overflow: hidden; } #rightcontent { float: left; width: 20%; /* right column width 24% , have included 4% padding 24 - 4 = 20% */ position: relative; left: 34%; /* content start @ 100% - 68% (width of leftcontent) = 32%. have included 2% padding 32 + 2 = 34% */ overflow: hidden; } class="snippet-code-html lang-html prettyprint-override"><section class="header"> <div class="banner"> banner </div> <nav> nav </nav> </section> <section class="main"> <div id="containerleft"> <div id="containerright"> <div id="leftcontent"> <p>lorem ipsum dolor sit down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim advertisement 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 european union 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 down amet, consectetur adipiscing elit, sed eiusmod tempor incididunt.</p> </div> </div> <!-- /end container2 --> </div> <!-- /end container1 --> </section> <section class="footer"> footer </section>

html css