我的CSS代码中的布局有问题

Question

I have this webpage, which I'm using to practice some html and css without using any wysiwyg editor. But there'are things that I don't find how to implement.

1. the header I would like to place it all the way up. and not showing the blank space between header and container border
2. the paragraph text is going out of the container. How could I keep the text inside?
3. The footer is not displayig

Fiddle

HTML

<div id="container">
    <div id="header">
        <h1>My Resume</h1>
    </div>
    <div id="sidebar">
        <ul>
            <li><a href="localhost">Java</a></li>
            <li><a href="localhost">Bash</a></li>
            <li><a href="localhost">PHP</a></li>
            <li><a href="localhost">MySQL</a></li>
        </ul>
    </div>
    <div id="mainContent">
        <p>akdjfaskdfjasdkfjaskdfjaskdfjaskdfjaskdjfskdfjassdkjfadfkjasdkfjaadfkakdfjadkfjdskfa</p>

        <ol>
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
        </ol>
        <a href="localhost"><img src="localhost"></a>
    </div>
    <div id="footer">
    </div>
</div>

CSS

h1 {
    text-align:center;
}

#container {
    width:800px;
    height:500px;
    background-color:#ffffff;
    margin:auto;
    border:1px solid #000000;
    /*text-align:left;*/
}

#header {
    text-align:center;
    height:200px;
    background-color:brown;
    margin:0 auto;


}

#sidebar {
    margin:0 auto;
    float:left;
    width:200px;
    height:200px;
    background:red;

}

#mainContent {
    margin:0 auto;
    background-color:white;
    width:600px;
    height:200px;
    float:left;
}

#footer {
    height:50px;
    margin:0 auto;
    background-color:orange;
}

Answer 1

Try Putting this at the top of your CSS for starters

            *
            {
                padding:0;
                margin:0;
            }

this will default all your elements, and take away extra padding and margins browsers add.

then give each element its own margin or padding or none.

Answer 2

I added these to your css:

/* added to remove whitespace */
*
{
    margin: 0;
}

/* added to #mainContent to wrap text */
        white-space: -moz-pre-wrap !important;  
        white-space: -pre-wrap;      
        white-space: -o-pre-wrap;    
        white-space: pre-wrap;       
        word-wrap: break-word;      
        word-break: break-all;
        white-space: normal;

 /* added to #footer to make it appear */
        width: 100%;
        overflow: hidden;

Demo here

Answer 3

your 3 problem solved see this FIDDLE DEMO

* {
    padding:0;
    margin:0;
} 
#mainContent p{
    word-wrap:break-word;
}
#footer {
    clear:both;
    height:50px;
    margin:0 auto;
    background-color:orange;
}

add clear:both; into your footer .more detail about : clear

Answer 4

Guess you should take care of the height of the footer which is defined as 50px; Because your footer style got merged with your container and hence you were not able to see your footer.
Your css should be some what like this:
h1 {
        text-align:center;
    }

    #container {
        width:800px;
        height:800px;
        background-color:#ffffff;
        margin:auto;
        border:1px solid #000000;
        /*text-align:left;*/
    }

    #header {
        text-align:center;
        height:200px;
        background-color:brown;
        margin:0 auto;


    }

    #sidebar {
        margin:0 auto;
        float:left;
        width:200px;
        height:200px;
        background-color:red;

    }

    #mainContent {
        margin:0 auto;
        background-color:Cyan;
        width:600px;
        height:200px;
        float:left;
    }

    #footer {
        height:200px;
            width:800px;
        margin:0 auto;
        background:Green;
    }