HTML & CSS - layout questions (using grid & flexbox) - html

Codepen: https://codepen.io/pprunesquallor/pen/qKxvrX
I'm a beginner playing around with grid and flexbox.
I'd like the height of the article element (yellow) to be only just as long as the text requires (so in this case cca half as long), and therefore the aside element (grey) should be of the same height depending on the height of the article, and scrollable.
Thank you in advance!!
html, body {
height: 100%;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"footer";
align-items: stretch;
}
header {
grid-area: header;
display: flex;
flex-direction: column;
background-color: lime;
}
header > h1 {
margin: 0;
background-color: brown;
}
nav {
display: flex;
flex-direction: row;
background-color: orange;
}
main {
grid-area: main;
display: flex;
flex-direction: row;
background-color: red;
}
article {
background-color: yellow;
}
aside {
width: 50%;
overflow: auto;
overflow-y: scroll;
background-color: grey;
}
footer {
grid-area: footer;
background-color: pink;
}
<html lang="en">
<body>
<header>
<h1 id="title">Header Title</h1>
<nav>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 1</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 2</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 3</button>
</form>
</nav>
</header>
<main id="main">
<article id="info">
<h2>Article Title</h2>
"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 <a id="link" href="" target="_blank">Link</a> 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."
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci leo et ex. Vivamus ut aliquet massa.
<br>
Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
</article>
<aside><h3>Aside</h3>
Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis.
<br>
Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere. Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis.
<br>
Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa, sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
</aside>
</main>
<footer>Footer</footer>
</body>
</html>


Is there a way to do this just with CSS?
You could use positioning.
HTML: Wrap the aside content in an additional container
<aside>
<div class="aside__inner">
...content...
</div>
</aside>
CSS:
aside {
position: relative;
}
.aside__inner {
position: absolute;
}
codepen
If you need the header and footer to expand so that the article is only as tall as its content, you can add grid-template-rows: auto min-content auto to body.
I'd also suggest using min-width instead width on aside
html,
body {
height: 100%;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "footer";
align-items: stretch;
/* added */
grid-template-rows: auto min-content auto;
}
header {
grid-area: header;
display: flex;
flex-direction: column;
background-color: lime;
}
header>h1 {
margin: 0;
background-color: brown;
}
nav {
display: flex;
flex-direction: row;
background-color: orange;
}
main {
grid-area: main;
display: flex;
flex-direction: row;
background-color: red;
}
article {
background-color: yellow;
}
aside {
width: 50%;
overflow: auto;
overflow-y: scroll;
background-color: grey;
position: relative;
}
.aside__inner {
position: absolute;
}
footer {
grid-area: footer;
background-color: pink;
}
<html lang="en">
<body>
<header>
<h1 id="title">Header Title</h1>
<nav>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 1</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 2</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 3</button>
</form>
</nav>
</header>
<main id="main">
<article id="info">
<h2>Article Title</h2>
"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
<a
id="link" href="" target="_blank">Link</a> 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."
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec
feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci
leo et ex. Vivamus ut aliquet massa.
<br> Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus
vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis
consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
</article>
<aside>
<div class="aside__inner">
<h3>Aside</h3>
Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet
odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis
placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum
at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis.
<br> Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere.
Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis.
<br> Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa,
sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
</div>
</aside>
</main>
<footer>Footer</footer>
</body>
</html>


Would this do what you want? https://codepen.io/anon/pen/OEZMwV
I just added the following JS, added an ID to <aside>, and changed the display of the #info id.
$("#aside").css({
'height': ($("#info").height() + 'px')
});


Here's a pen where I have this working.
https://codepen.io/anon/pen/jKKvpb
Basically, what you're asking for is not possible given the HTML/CSS you provided. The grid rows will automatically size themselves according to the height of the tallest item in the column. There's no way to grab the natural height of the <article> element due to the the flex css on <main>.
The workaround is to add a wrapper <div> around the <article> element. I did this with jQuery because I'm lazy but you should probably add it to the HTML. I did add some css to make the colors of the divs match up.
Here's my code:
//wrap the article in a div
jQuery('#info').wrap('<div id="article-wrap"></div>');
//a function that gets the height of the article and sets the aside to the height of the article
function sizeMe() {
var height= jQuery('#info').height();
jQuery('#aside').css('height', height);
}
//run the function on page load
sizeMe();
//to make it responsive run the function if the page is resized.
jQuery(window).resize( function(){
sizeMe();
});

Related

Is it possible to apply CSS styles to a sticky element when scrolling without JavaScript?

If I have a navigation bar which is set postion:sticky; in CSS, I'd like to add more style to it when it is "sticking" to the top of the container. In essence, the following code reproduce what I'd like as behavior, however I wanted to know if the same is possible only with CSS.
const minScroll = $('.navbar').position().top;
$('.container').on('scroll', e => {
let y = e.target.scrollTop;
if (y > minScroll) {
$('.navbar').addClass('navbar-shadow');
} else {
$('.navbar').removeClass('navbar-shadow');
}
});
.container {
position: relative;
height: 180px;
border: 1px solid black;
overflow: auto;
}
.navbar {
position: sticky;
background-color: #ddd;
padding: 0.3em 0.5em;
z-index: 100;
top: 0;
transition: 300ms linear all;
}
.navbar-shadow {
box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
Navigation bar
</div>
<p>
Etiam phasellus eget. Adipiscing odio lobortis. Vestibulum ac lacus. Est fermentum penatibus. Eu sit hendrerit. Sed laborum vestibulum. Vivamus faucibus non. Parturient et ut sit turpis nulla fringilla vitae purus penatibus in dolor faucibus tincidunt vestibulum dictumst in lobortis facilisis ac porta. Quisque sed libero sem vestibulum sed donec eros sociis. Sed erat elit elementum etiam lacus montes id adipiscing.
Nec lobortis dolor rutrum commodo proin aliquet taciti varius nec pellentesque in. Molestie pulvinar a sodales sit tortor. In elit laoreet amet id tellus tincidunt risus elit mauris eu odio in consequat lacus amet cursus et ante vestibulum suspendisse elementum commodo sed. Facilisi inceptos nonummy duis nec diam. Arcu quis accumsan morbi id sapien wisi praesent platea. Proin faucibus pretium massa ut facilisi. Velit dignissim pede. Enim dolor donec sed dignissim vel. Libero porta consectetuer. Malesuada viverra nec. Rutrum pellentesque pellentesque vitae per praesent aenean vehicula ligula. Et viverra in. Quis enim in. Sed mi metus. In velit eget. Class hac eros. Ut torquent maecenas. Tellus felis diam nibh sed purus. Vestibulum sit urna lacus ac tortor etiam id mattis. Ea lorem venenatis mauris inceptos sed. Vestibulum aliquip tempor ut lorem lacus feugiat curabitur feugiat mauris nec aliquet duis et amet egestas aptent libero augue massa leo et ac aliquam. Convallis purus accumsan. Aliquam elementum fermentum sit hac est. Sit pellentesque curabitur. Nibh ligula vestibulum. Sed curabitur aenean sint mauris risus condimentum nostra in. Ultricies vulputate id. Cras ornare non. Iaculis mauris praesent. Lobortis rutrum velit. Nulla nibh et. Enim libero pellentesque viverra ac cursus. Ut massa condimentum. Neque lobortis suspendisse sodales eget aenean orci ipsum quaerat. Metus adipiscing montes.
Ut nec sed nulla condimentum quis. Fusce odio bibendum gravida ut eu mauris pede ac. Etiam adipiscing vero gravida amet sunt. Dui vulputate lacus in diam quis. Volutpat nec nam.
</p>
</div>
</div>
Can this be done only with CSS?

One idea is to make the shadow on another div that your also make sticky. The trick is that the new div will be behind the navbar and the sticky behavior will make it appear when needed. The only drawback is that you need to know the height of the navbar to correctly set the top value of the new div
.container {
position: relative;
height: 180px;
border: 1px solid black;
overflow: auto;
}
.navbar {
position: sticky;
background-color: #ddd;
padding: 0.3em 0.5em;
z-index: 100;
top: 0;
}
.shadow {
height: 10px; /* Bigger enough to have the same shadow */
margin-top: -20px; /* Hide me !*/
position: sticky;
top: 18px; /* This is the best value in our case considering the navbar*/
z-index: 5; /* Lower z-index */
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="navbar">
Navigation bar
</div>
<div class="shadow"></div>
<p>
Etiam phasellus eget. Adipiscing odio lobortis. Vestibulum ac lacus. Est fermentum penatibus. Eu sit hendrerit. Sed laborum vestibulum. Vivamus faucibus non. Parturient et ut sit turpis nulla fringilla vitae purus penatibus in dolor faucibus tincidunt
vestibulum dictumst in lobortis facilisis ac porta. Quisque sed libero sem vestibulum sed donec eros sociis. Sed erat elit elementum etiam lacus montes id adipiscing. Nec lobortis dolor rutrum commodo proin aliquet taciti varius nec pellentesque in.
Molestie pulvinar a sodales sit tortor. In elit laoreet amet id tellus tincidunt risus elit mauris eu odio in consequat lacus amet cursus et ante vestibulum suspendisse elementum commodo sed. Facilisi inceptos nonummy duis nec diam. Arcu quis accumsan
morbi id sapien wisi praesent platea. Proin faucibus pretium massa ut facilisi. Velit dignissim pede. Enim dolor donec sed dignissim vel. Libero porta consectetuer. Malesuada viverra nec. Rutrum pellentesque pellentesque vitae per praesent aenean
vehicula ligula. Et viverra in. Quis enim in. Sed mi metus. In velit eget. Class hac eros. Ut torquent maecenas. Tellus felis diam nibh sed purus. Vestibulum sit urna lacus ac tortor etiam id mattis. Ea lorem venenatis mauris inceptos sed. Vestibulum
aliquip tempor ut lorem lacus feugiat curabitur feugiat mauris nec aliquet duis et amet egestas aptent libero augue massa leo et ac aliquam. Convallis purus accumsan. Aliquam elementum fermentum sit hac est. Sit pellentesque curabitur. Nibh ligula
vestibulum. Sed curabitur aenean sint mauris risus condimentum nostra in. Ultricies vulputate id. Cras ornare non. Iaculis mauris praesent. Lobortis rutrum velit. Nulla nibh et. Enim libero pellentesque viverra ac cursus. Ut massa condimentum. Neque
lobortis suspendisse sodales eget aenean orci ipsum quaerat. Metus adipiscing montes. Ut nec sed nulla condimentum quis. Fusce odio bibendum gravida ut eu mauris pede ac. Etiam adipiscing vero gravida amet sunt. Dui vulputate lacus in diam quis. Volutpat
nec nam.
</p>
</div>
</div>

Trying to make separate divs line up at the bottom of the page using CSS

For the site I'm currently making, on the right side is a sidebar with some content that extends to the bottom of the page. To the left is the main content of the site, separated into several bootstrap rows and columns, which also go to the bottom of the page.
However, these two sides of the page do not end at the same spot, making it look like this:
I scratched out the name in the picture.
I had a fix in mind, but I wanted to ask here before I can implement it tomorrow morning if it'd work. If I set a specific height for the sidebar on the right, and then set specific heights for the containers on the left that add up to that same height on for the content on the right, would that fix this issue in all browsers? I'm hiding the right side content on mobile and tablets, so it's not an issue there. Any help would be appreciated.
Relevant code below, this is for the sidebar on the right, on the left are several rows and columns using bootstrap.
I've tried several things to fix this, like playing with the spacing, but it's clear that will never work on every browser. Please let me know if you need any more information.
<div class="test-container testimonials hidden-sm hidden-xs">
<!--Testimonial Container -->
<h3>Testimonials & Reviews</h3>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
<p class="customer-name">-Name</p>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
<p class="customer-name">-Name</p>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
<p class="customer-name">-Name</p>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
<p class="customer-name">Name</p>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."
<p class="customer-name">Name</p>
<p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
<p class="customer-name">-Name</p>
</div>
<!-- End Testimonial Container-->

Apply a display:flex to the .container
Remove the float property on .test-container
Remove the margin top on .test-container
Take out the red experimental border on .content-container
fiddle is here

Did you perhaps want to make something like this? (two div have same height, and will follow the height of the higher div, run the code snippet below)
then you can use flex. that if you don't need to support older IE version. if you want to support older IE, then you need to do it via javascript.
.wrapper {
display: flex;
width: 100vw;
font-size: 0;
}
.right-content {
width: 20%;
display: inline-block;
font-size: 16px;
background-color: green;
}
.left-content {
width: 80%;
display: inline-block;
font-size: 16px;
vertical-align: top;
background-color: red;
}
<div class="wrapper">
<div class="left-content">
<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 class="right-content">
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
<div> Name </div>
</div>
</div>

How to make the body and it's children have 100% of the visible height?

BOTH HTML/BODY 100% SOLUTION
html, body { height : 100% }
This works, no doubt. Both elements will take up the full screen, perfect.
Why not use? vh-instead? Well that has to do with mobile Safari, there is a big difference between 100% taking up the visible space and 100vh taking the view height making it larger then the toolbar, not desired in my case.
There is just one big problem with this approach. If the content within the body takes up more then 100% of the visible height, like in most cases, it will overflow. This might not be a big problem, besides it feeling hacky, however it does break -webkit-sticky to not stick elements further then the body container.
MIN-HEIGHT TO THE RESCUE, NOT QUITE
So actually what we want is to say, hey HTML and BODY be at least 100%. That would solve all our problems because that's exactly what we want. Luckily there is a property for that min-height.
html, body { min-height : 100% }
If they are both at least 100% of the viewport it should work, but it doesn't.
PROPOSED SOLUTION
html {
height : 100%;
}
body {
min-height : 100%;
}
This does make the height of the body the viewport height, however all the children elements do not recognize this, for example:
HTML Source
<head>
<title>Body Height Problem</title>
</head>
<body>
<div class="fullheight-cover">
Some beautiful image with the CSS background.
</div>
<section class="content">
Some content in section A.
</section>
<section class="content">
Some content in section B.
</section>
</body>
</html>
CSS Source
html,
body {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
background: red;
}
.fullheight-cover {
min-height: 100%;
background: green;
}
(Codepen: http://codepen.io/anon/pen/pbGWBq)
If you inspect the elements you will notice that the body will now have a height, which is awesome. However you expect .fullheight-cover to fill up this space with it's height being minimal 100% as well, but this does not work.
How can I make it so that the children of the body can make use of the 100% height that flows naturally?

Check this. Im added display: flex to body, and width: 100% to .content
html,
body {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
background: red;
display: flex;
}
.content {
width: 100%;
min-height: 100%;
background: green;
}
<html>
<head>
<title>Body Height Problem</title>
</head>
<body>
<div class="content">
Some sample content.
</div>
</body>
</html>

Hey I can help you with a solution
you can fix this template with css alone, Its better to use css rather than js.
This is a sample template please go through it.
SOLUTION
The html is..
<html>
<link rel="stylesheet" href="style.css"/>
<body>
<header class="border"><h1>Header</h1></header>
<section class="sub-header border"><h2>Sub header</h2></section>
<div class="side-menu border">
<div class="menu-head"><h3>Menu heading</h3></div>
<div class="menu-items ">
<p>Menu items 1</p>
<p>Menu items 2</p>
<p>Menu items 3</p>
<p>Menu items 4</p>
</div>
</div>
<div class="main-content border">
<p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
</div>
</body>
</html>
CSS is..
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: auto;
}
.border{
border: 1px solid #000;
}
header{
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #ea4242;
}
.sub-header{
text-align: center;
position: fixed;
left: 0;
top: 39px;
width: 100%;
background: #d46b6b;
}
.side-menu{
width: 240px;
position: fixed;
left: 0;
top: 68px;
height: 89%;
}
.menu-head{
width:100%;
text-align: center;
padding: 12px 0;
background: #96a2ff;
}
.menu-items{
height: 100%;
}
.menu-items p{
padding: 20px 10px;
border-bottom:1px solid #777;
}
.main-content{
height: 1900px;
width: calc(100% - 252px);
margin-left: 240px;
margin-top: 66px;
background: #fdefa9;
padding: 0 0px 0 10px;
}
Try this it will suits you the best way
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: auto;
}
.border{
border: 1px solid #000;
}
header{
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background: #ea4242;
}
.sub-header{
text-align: center;
position: fixed;
left: 0;
top: 39px;
width: 100%;
background: #d46b6b;
}
.side-menu{
width: 240px;
position: fixed;
left: 0;
top: 68px;
height: 89%;
overflow:auto;
overflow:auto;
}
.menu-head{
width:100%;
text-align: center;
padding: 12px 0;
background: #96a2ff;
}
.menu-items{
height: 100%;
}
.menu-items p{
padding: 20px 10px;
border-bottom:1px solid #777;
}
.main-content{
height: 1900px;
width: calc(100% - 252px);
margin-left: 240px;
margin-top: 66px;
background: #fdefa9;
padding: 0 0px 0 10px;
}
<header class="border"><h1>Header</h1></header>
<section class="sub-header border"><h2>Sub header</h2></section>
<div class="side-menu border">
<div class="menu-head"><h3>Menu heading</h3></div>
<div class="menu-items ">
<p>Menu items 1</p>
<p>Menu items 2</p>
<p>Menu items 3</p>
<p>Menu items 4</p>
</div>
</div>
<div class="main-content border">
<p>Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet. Lorem ipsum dolor sit amet, rhoncus in nulla eget congue, lacus at id libero. Wisi viverra eget luctus senectus, nibh in at non tincidunt leo nulla, cras non risus, tincidunt vitae egestas. Condimentum integer sem at porttitor mi parturient. Amet vivamus nulla vivamus, dignissim velit ut quis erat donec. Tellus amet augue sodales ante. Nisl vehicula sollicitudin vitae. Ipsum arcu nulla elit maecenas habitasse, et mi, vehicula ullamcorper, nec eu eget ac placerat. In ac mauris morbi. Interdum nec tincidunt at ipsum est elit. Senectus lectus tincidunt aenean, nunc non vitae velit, ante sagittis animi vestibulum vestibulum luctus proin, fringilla quis nobis nunc ligula mus, vitae laoreet. Integer donec imperdiet vehicula.
Lectus mauris aliquam a mus consequat. Pulvinar minus in nam, aliquet erat, habitasse sed lorem velit, nullam purus in pariatur vitae lobortis sit. Varius et, erat nec dapibus tellus massa vitae, facilisis nulla pulvinar vivamus, nascetur imperdiet velit volutpat ut tellus. Pretium eros nascetur wisi consequat, pulvinar suspendisse duis curae, ratione a est sollicitudin maecenas sit mus, suspendisse justo lectus vitae libero est. Luctus ultricies, dis praesent in vestibulum, scelerisque ligula massa fusce, metus hendrerit vitae vitae rhoncus, arcu morbi ipsum curabitur dolor. Mauris vitae in, viverra amet lacus metus in mollis at. Lorem quam elementum mauris nam placerat. Urna in iaculis morbi lectus mauris vivamus.
Libero corporis amet, ante justo et pede arcu, ipsum massa ridiculus, semper class accumsan sociis cras. Dui eget vel ligula vel felis in. Massa mollis etiam gravida sagittis ante ligula, dis vehicula, sit leo, convallis morbi eu dis nec sapien sapien, augue imperdiet cursus justo conubia turpis. Nunc molestie pellentesque, phasellus scelerisque, in tristique et vel, adipisci dis pharetra nunc lacus. Rhoncus mi faucibus erat. Nibh nam, nunc vestibulum sed pellentesque suscipit exercitation, elit consectetuer vitae dolor sapien lorem, ligula vestibulum justo ut. Mauris urna est metus vel id sed, ornare condimentum, neque magna sodales, illum adipiscing tristique ligula augue vel, ut minus et pretium enim perspiciatis ullamcorper.
Erat eu cubilia massa arcu etiam, duis nostra sodales dictum scelerisque sed, fringilla pretium elementum nibh ligula, justo hendrerit magna. Dolor tellus cras, amet at aliquam egestas non tincidunt, vitae quis posuere consequat, purus massa sodales. Vulputate ipsum nec. Vitae amet, a massa mauris et, egestas odio fermentum, nam augue ipsum, id penatibus arcu ridiculus arcu. Nibh aenean sit, est quis luctus, eu eget consequat sit tincidunt a wisi, wisi eu, mi lacus maecenas. In consectetuer elementum, velit condimentum viverra porta. Arcu vulputate, elit vivamus ut sem vulputate, odio ac ipsum aliquam ut semper ante, ac ut ultricies ac, nec arcu risus dignissim fermentum pede amet.</p>
</div>

Try this
<div style="overflow: hidden;">
<div style="background: green; float: left; padding-bottom: 20000px; margin-bottom: -20000px; width: 30%">Column 1st</div>
<div style="background: red; padding-bottom: 20000px; margin-bottom: -20000px; float: left; width:70%">Column 2nd<br/>Your text text text<br/>Other text text and something other text</div>
</div>

Text wrap around image, to one column

I have an image I want text to wrap around, but at about 793px I want it to just drop down to one column, image on top, text on bottom. I tried a media query with float: none, but for some reason that didn't work. Thanks in advance!
/*float left*/ .left { float: left; /*left in our text*/ margin: 3px; /*space around the image*/
}
#media (max-width: 793px;) {
img {
float:none;
}
}
<p> <img src="https://36.media.tumblr.com/e09631b272ecaf21862513edd536eeed/tumblr_n7a2ldALJt1so5delo1_500.jpg" alt="temp" class="left" /> Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Maecenas tempor finibus hendrerit. Aenean rutrum rhoncus ultricies. Vivamus egestas sollicitudin ex pulvinar finibus. Suspendisse a mi ac augue dictum blandit. Donec malesuada convallis placerat. Integer et hendrerit tellus. Donec eu justo mattis, consectetur orci ac, posuere diam. Integer nec accumsan turpis. Ut quis dolor eu ante pulvinar iaculis cursus at quam.
Donec laoreet facilisis sapien euismod finibus. Nam malesuada dapibus ex, sed rutrum tortor consequat in. Aenean quis elit dapibus, vestibulum massa nec, porta odio. Nam accumsan est sed velit scelerisque commodo. Morbi id massa quis lorem tristique convallis at vel leo. Aenean pharetra aliquam porta. Sed ac tellus rutrum, egestas leo sed, sagittis velit. Vestibulum et tellus arcu.
Suspendisse imperdiet purus felis, at pharetra magna molestie at. Aenean non nibh sed ex laoreet tempor vel vel dui. Fusce ut arcu eget mi pulvinar molestie a ut metus. Etiam ex ante, volutpat ac leo convallis, venenatis sollicitudin lorem. Mauris tempor mollis euismod. Phasellus viverra dolor egestas turpis pulvinar, ac sollicitudin arcu facilisis. Sed viverra quam lectus, in fermentum libero vestibulum ac. Duis fringilla tempus dui, lobortis fringilla lacus volutpat quis. Nam iaculis nisl vitae mauris scelerisque, eget vulputate purus aliquet. Nullam dictum nunc a enim tempus, et fermentum lectus tristique.
Nulla quis mattis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a elit nec ipsum accumsan cursus. Nunc vitae lorem a tellus aliquam luctus eu eget turpis. Vivamus dapibus elementum imperdiet. Nullam facilisis mauris ac tellus fringilla volutpat. Sed elementum ligula dolor, vitae tincidunt ligula ultrices in.
</p>

The reason you're having issues is that images are inline by default, so we need to add display: block to the image in the media query. Also your media query is missing some components.
CSS:
img{
float: left;
}
#media screen and (max-width: 793px){
img{
display: block;
float: none;
margin: 0 auto 15px;
}
}
That should do the trick. Here is a fiddle.
UPDATE
Centered the image with some margin as well updated fiddle and code.

I think the other answer works perfectly well. I was actually struggling with your bug when I realized one of the problems was that your media query wasn't formatted correctly. The semi-colon was messing things up. Anyways, happy coding!
img {
float: left;
margin: 3px;
}
#media (max-width: 793px) {
p {
float: left;
}
}
<img src="https://36.media.tumblr.com/e09631b272ecaf21862513edd536eeed/tumblr_n7a2ldALJt1so5delo1_500.jpg" alt="temp"/>
<p>Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Maecenas tempor finibus hendrerit. Aenean rutrum rhoncus ultricies. Vivamus egestas sollicitudin ex pulvinar finibus. Suspendisse a mi ac augue dictum blandit. Donec malesuada convallis placerat. Integer et hendrerit tellus. Donec eu justo mattis, consectetur orci ac, posuere diam. Integer nec accumsan turpis. Ut quis dolor eu ante pulvinar iaculis cursus at quam.
Donec laoreet facilisis sapien euismod finibus. Nam malesuada dapibus ex, sed rutrum tortor consequat in. Aenean quis elit dapibus, vestibulum massa nec, porta odio. Nam accumsan est sed velit scelerisque commodo. Morbi id massa quis lorem tristique convallis at vel leo. Aenean pharetra aliquam porta. Sed ac tellus rutrum, egestas leo sed, sagittis velit. Vestibulum et tellus arcu.
Suspendisse imperdiet purus felis, at pharetra magna molestie at. Aenean non nibh sed ex laoreet tempor vel vel dui. Fusce ut arcu eget mi pulvinar molestie a ut metus. Etiam ex ante, volutpat ac leo convallis, venenatis sollicitudin lorem. Mauris tempor mollis euismod. Phasellus viverra dolor egestas turpis pulvinar, ac sollicitudin arcu facilisis. Sed viverra quam lectus, in fermentum libero vestibulum ac. Duis fringilla tempus dui, lobortis fringilla lacus volutpat quis. Nam iaculis nisl vitae mauris scelerisque, eget vulputate purus aliquet. Nullam dictum nunc a enim tempus, et fermentum lectus tristique.
Nulla quis mattis enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a elit nec ipsum accumsan cursus. Nunc vitae lorem a tellus aliquam luctus eu eget turpis. Vivamus dapibus elementum imperdiet. Nullam facilisis mauris ac tellus fringilla volutpat. Sed elementum ligula dolor, vitae tincidunt ligula ultrices in.
</p>

Div disappearing under another div

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.

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>