Adding Header moves Div

Question

Whenever I add a heading to the second div in my header, it move down. I've seen several answers to this problem, but none have worked so far, so this is either different, or I'm doing it wrong.

This is my header

<div id='header' class='full'>
    <div id='headerhead' class='full'></div>
    <div id='headertext' class='full'><h1>Protocol Grean</h1></div>
    <div id='headerbuttons'></div>
</div>

This is the CSS for the four divs

#header {
    height: 200px;
    background-color: green;
}
#headerhead {
    height: 50px;
    background-color: darkgreen;
}
#headertext {
    padding-left: 50px;
    height: 100px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    background-color: pink;
}
#headerbuttons {
    height: 50px;
    background-color: blue;
}

What do I need to add to make the HeaderText not float down? Vertical align doesn't seem to do anything for me, and position absolute just make the HeaderButtons go away.

Answer 1

You need to remove the margin from your h1 element:

#headertext h1 {
    margin: 0;
}