CSS challenge: Difficulty with proper column alignment/floats. please help

Question

Hello Team Treehouse,

I am at a stand still and near a breaking point. i believe i have spent a bit too much time away from my self studies, due to my job and constant travel from state to state, it is hard especially with a road block and only 2-3 hours a night to study. i bought a book and have been studying with that hands on. I have to be honest, the courses on treehouse, i dont seem to pay much attention to and i can blow through them with ease. maybe i havent gone through far enough. the info at times doesn't seem relevant to what i want to know BUT i am not saying it is useless information, i find myself going back and forth, using the teachers notes to redirect me to other sources.

this is my first time actually reaching out for help, i feel if i dont i may end up giving up and i really dont want to do that to myself.

anyway.. i've noticed in other posts there is a way to post code in a nice readable format... I have no idea how to do that. so i am going to do my best to describe with words and paste my code so if you want you may save it as your own index.html, style.css and reset.css and view the project in your browser.

my index.html is this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Amazeriffic</title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <header>
            <div class="container">
                <h1>Amazeriffic</h1>
                <nav>
                    <a href="#">Sign Up!</a> |
                    <a href="FAQ.html">FAQ</a> |
                    <a href="#">Support</a>
                </nav>
            </div>
        </header>

        <main>
            <div class="container">
                <div class="content">
                    <div class="contact">
                        <h2>Amazeriffic will change your life!</h2>
                        <p>But I must explain to you how all this mistaken idea of denouncing of a pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness</p>
                        <h3>Here's why you need Amazeriffic</h3>
                        <ul>
                            <li>It fits your lifestyle</li>
                            <li>It's awesome</li>
                            <li>It rocks your world</li>
                        </ul>
                    </div>
                </div>
                <div class="img">
                    <img src="lightbulb.png" alt="an image of a lightbulb">
                </div>
            </div>
        </main>

        <footer>
            <div class="container">
                <h5>Contact Us!</h5>
                <p>Amazeriffic!</p>
                <p>555 fiftyfifth Street</p>
                <p>Moon Base, Moon.</p>


                <div class="sitemap">
                    <h5>Sitemap</h5>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Privacy</a></li>
                        <li><a href="#">Support</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Careers</a></li>
                    </ul>
                </div>
            </div>
        </footer>
    </body>
</html>

My style.css is this :

body {
    background: #f9e933;
}

header, main, footer {
    min-width: 855px;
}

header .container, main .container, footer .container {
    max-width: 855px;
    margin: auto;
}

header {
    background: white;
    overflow: auto;

}

main {
    background: white;
    overflow: auto;
}

header h1 {
    float: left;
    width: 570px;
}

header nav {
    float: right;
    width: 285px;
}

main .content {
    float: left;
    width: 570px;
}

main img {
    float: right;
    width: 285px;
}

main {
    overflow: auto;
}

footer .sitemap {
    float: right;
    width: 285px;
    float: top;
}

footer .contact {
    float: left;
    width: 570px;
}

My browser reset.css is this:

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;
}

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;
}

Moderator edited: Added markdown so that code renders properly in the forums.

Answer 1 · 2017-03-01T16:23:00Z

March 1, 2017 4:23pm

Not sure that I understand what your two questions are:

Need more clarification on what needs fixing
You want Contact Us and Sitemap in the same row but opposite sides?

Welcome to the Treehouse Community

Looking to learn something new?

Christian Sharkey

Christian Sharkey

CSS challenge: Difficulty with proper column alignment/floats. please help

Christian Sharkey

Christian Sharkey

Jennifer Nordell

Jennifer Nordell

1 Answer

Sam Deighton II

Sam Deighton II