Full height sidebar

Using only CSS

by genelocklin

HTML

<div>
    
    <section>
        <p>Oh, I always feared he might run off like this. Why, why, why didn’t I break his legs? Meh. Spare me your space age technobabble, Attila the Hun! A true inspiration for the children. Hey, tell me something. You’ve got all this money. How come you always dress like you’re doing your laundry? Does anybody else feel jealous and aroused and worried?</p>
        <p>What are you hacking off? Is it my torso?! ‘It is!’ My precious torso! You won’t have time for sleeping, soldier, not with all the bed making you’ll be doing. I’ll tell them you went down prying the wedding ring off his cold, dead finger.</p>
        <p>Kif might! Oh dear! She’s stuck in an infinite loop, and he’s an idiot! Well, that’s love for you. It’s toe-tappingly tragic! Now, now. Perfectly symmetrical violence never solved anything. That’s not soon enough! I feel like I was mauled by Jesus.</p>
        <p>So I really am important? How I feel when I’m drunk is correct? Is that a cooking show? Shut up and take my money!</p>
        <p>Stop! Don’t shoot fire stick in space canoe! Cause explosive decompression! Uh, is the puppy mechanical in any way? A sexy mistake. Yes! In your face, Gandhi! Eeeee! Now say “nuclear wessels”! Kif, I have mated with a woman. Inform the men.</p>
    </section>
    
    <aside>
        <p>Oh, I always feared he might run off like this. Why, why, why didn’t I break his legs? Meh. Spare me your space age technobabble, Attila the Hun! A true inspiration for the children. Hey, tell me something. You’ve got all this money. How come you always dress like you’re doing your laundry? Does anybody else feel jealous and aroused and worried?</p>
        <p>What are you hacking off? Is it my torso?! ‘It is!’ My precious torso! You won’t have time for sleeping, soldier, not with all the bed making you’ll be doing. I’ll tell them you went down prying the wedding ring off his cold, dead finger.</p>
        <p>Kif might! Oh dear! She’s stuck in an...

CSS

/*- awesome reset ----------*/
* { margin: 0; padding: 0; }

/*- type and background colors ----------*/
html { font-size: 100%; }

body {
    font: 100%/1.5 Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
    color: #fff;
    margin: 0 auto;  
    background: #fff;
}

p {
    font-size: 75%;
    margin-bottom: 1.25em;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

p:last-child { margin-bottom: 0; }

/*- begin example code ----------*/
div {
    margin: 2em auto;
    position: relative;
    max-width: 60em;
    width: 90%;
    background: #a90329;
    background: -moz-linear-gradient(left, #a90329 0%, #a90329 60%, #6d0019 60%, #6d0019 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(60%,#a90329), color-stop(60%,#6d0019), color-stop(100%,#6d0019));
    background: -webkit-linear-gradient(left, #a90329 0%,#a90329 60%,#6d0019 60%,#6d0019 100%);
    background: -o-linear-gradient(left, #a90329 0%,#a90329 60%,#6d0019 60%,#6d0019 100%);
    background: -ms-linear-gradient(left, #a90329 0%,#a90329 60%,#6d0019 60%,#6d0019 100%);
    background: linear-gradient(left, #a90329 0%,#a90329 60%,#6d0019 60%,#6d0019 100%);
    -webkit-box-shadow: 2px 8px 10px 4px rgba(0,0,0,.35);
       -moz-box-shadow: 2px 8px 10px 4px rgba(0,0,0,.35);
        -ms-box-shadow: 2px 8px 10px 4px rgba(0,0,0,.35);
         -o-box-shadow: 2px 8px 10px 4px rgba(0,0,0,.35);
            box-shadow: 2px 8px 10px 4px rgba(0,0,0,.35);
}

section {
    margin: 0 2.5%;
    padding: 2.5% 0;
    width: 55%;
}

aside {
    position: absolute;
    right: 0;
    top: 0;
    width: 35%;
    margin: 0 2.5%;
    padding: 2.5% 0;}

@media all and (max-width: 34em) { 
    
    div { 
    background: #a90329;
    }

    section { 
    position: relative;
    width:95%;
    margin-left:auto;
    margin-right:auto;        
    background: #a90329;
    padding:...