Forcing divs to touch each other vertically

Question

I want to have a page like this.

After trying some CSS and HTML code like this: CSS Code:

html,body{
    margin:0px;
    background-color:#CCC;
}
#header{
    background-color:#FFF;
    height:350px;
    width:750px;
    display:block;
    }
#menu{
    background-color:#096;
    height:60px;
    width:100%;
    display:block;
}
#content{
    background-color:#03F;
    width:750px;
    height:400px;
    }
#footer{
    background-color:#900;
    height:120px;
    width:750px;
    display:block;
    bottom:0px;
    position:relative;
    }

HTML Code:

<center>
    <div id="header">

    </div>
    <div id="menu">

    </div>
    <div id="content">

    </div>
    <div id="footer">

    </div>
</center>

it was the same thing but after making some text into "content" part divs got separate. like thisThis.

Whats the issue in my CSS code?

Answer 1

It is Because p tag have some default margin.

Add CSS like this

p{
margin:0px;
}

Fiddle