css div alignment top

Question

My code:

<div id="container">
<div id="header">
<h1>Hello.</h1>
</div>
<div id="welcome" >
<a href="/eciepecie">Login</a>
</div></div>

#welcome{
color: #333333;
font-size: 90%;
float: right;
text-align: right;
padding-right: 30px;
}
#header{
padding: 10px 20px;
width: 400px;
}
#header h1 {
line-height:20px;
float: left;
background: #ffffff url('../img/hello.png') no-repeat left;
color: #222222;
padding: 0px 30px;
}

I wish both divs (header and welcome) to be "aligned top" but they aren't, ->left one #header is above left div.

Answer 1

I removed the <h1> tag around "Hello." and made the following changes:

#welcome{
    color: #333333;
    font-size: 90%;
    padding-top: 10px;
    text-align: right;
    padding-right: 30px;
}

#header{
    padding: 10px 20px;
    width: 400px;
    float: left;
}

The <h1> tag typically has predefined padding and other properties that can throw off things like spacing.

Example

Answer 2

Put float: left; on both of them.