Make Text Go To Bottom Of Page?

[Spencer_2]

http://prntscr.com/2l3gnh - My Problem

I'm currently using this HTML:

<footer>
    <p class="alignleft">Text on the left.</p>
    <p class="alignright">Text on the right.</p>
</footer>

With this CSS:

/***** Reset *****/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/***** Styles *****/
html { width: 100%; -webkit-font-smoothing: antialiased; }
body { width: 100%; padding: 0; margin: 0; background: #000; text-align: center; }

p { font-size: 1.5em; line-height: 1.35em; color: #fff; padding: 0; margin: 60px 0 40px; font-family: 'helvetica neue', helvetica, arial, sans-serif; font-weight: 200; }
p strong { font-weight: 500; }

a { color: #ffcc00; text-decoration: none; }
a:hover { color: #fff; -webkit-transition:all 0.2s ease-in-out; }

ul { display: block; }
ul li { display: inline-block; margin: 0 10px; }
ul li a { opacity: 0.5; }
ul li a:hover { opacity: 1; -webkit-transition:all 0.2s ease-in-out; }

ul li.twitter a { width: 57px; height: 57px; display: block; background: transparent url('http://spencermoo.re/images/twitter.png') top center no-repeat; text-indent: -9999px; }
ul li.tumblr a { width: 57px; height: 57px; display: block; background: transparent url('http://spencermoo.re/images/tumblr.png') top center no-repeat; text-indent: -9999px; }
ul li.youtube a { width: 57px; height: 57px; display: block; background: transparent url('http://spencermoo.re/images/youtube.png') top center no-repeat; text-indent: -9999px; }
ul li.email a { width: 57px; height: 57px; display: block; background: transparent url('http://spencermoo.re/images/email.png') top center no-repeat; text-indent: -9999px; }

.logo h1 a { width: 60px; height: 79px; display: block; background: url('http://spencermoo.re/images/logo.png') top center no-repeat; text-indent: -9999px; padding: 0; margin: 0 auto; border: none; text-align: center; }
.logo h1 a:hover { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); }
.content { max-width: 480px; padding: 0 20px; display: block; margin: 15% auto 0; }

.vegas-loading { display: none; }
.vegas-overlay { background: transparent url('http://spencermoo.re/images/overlay.png'); opacity: 0.5; z-index: -1; }
.vegas-background { image-rendering: optimizeQuality; -ms-interpolation-mode: bicubic; z-index: -2; }

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

I want the text to be at the very bottom... like a footer. I want to keep my left and right aligned text too. Any help?

[JorgeM]

this is pretty common. It sounds like you want to "push" the footer down to the very bottom of the page even when you dont have enough content on the page to push it down on its own. This is sometimes known as a "sticky" footer.

Its quite easy to do and there are a few variations out there on how to implement. Here is an example you can follow and adapt to your site: Pushing a Footer to the Bottom of a Web Page

My suggestion is start with the template, then add your content in. If you start with your existing page and you try to mimic the "sticky" footer example, it may be more challenging to get it right, at least that is what I have experienced in other similar threads where someone has tried to implement it.

[diafol]

Great advice as usual ^^.

I'd just add - sticky footers can be really tricky to get right on mobile devices. Test your styles in mobile browsers to see if the sticky footer stays put - or does it jump up and down as you scroll? If it does, you may need to modify the styling or even use a media query to provide a different solution for mobile.