Aligning text inside a DIV to the bottom

Question

look at this jsfiddle http://jsfiddle.net/buqhK/embedded/result/ . That white space is logo and on the right side is that I want to move to the bottom so it's on the same height as logo. That text Lorania . How can I do it?

Here is my HTML:

<div id="header">
    <div id="header-wrap">
        <div id="logo"></div>
        <div id="header-text">Lorania</div>
        <hr>
        <div id="menu">
            <ul>
                <li><a href="#" class="righter">aktualley</a>
                </li>
                <li><a href="#" class="righter">local thing</a>
                </li>
                <li><a href="#" class="righter">local club</a>
                </li>
                <li><a href="#" class="righter">local lore</a>
                </li>
                <li><a href="#" class="righter">contact</a>
                </li>
                <li><a href="#" class="righter2">photogaller</a>
                </li>
                <li><a href="#">contast</a>
                </li>
            </ul>
        </div>
    </div>
</div>

and here is my CSS

/* Main CSS*/
html, body{ 
    margin:0; 
    padding:0; 
    height:100%; 
    width:100%; 
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}

/* HEADER */
#header {
    background-color: black;
    background-position: center center;
    background-repeat: repeat-y;
    height: 172px;
    width: 100%;
    position: relative;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    height: 140px;
    width: 800px;
    padding-top: 30px;
}
#logo {
    background-color: white;
    background-repeat: no-repeat;
    height: 80px;
    width: 330px;
    margin-bottom: 20px;
    float: left;
}
#header-text {
    color: #fff;
    font-size: 40px;
    float: right;
}
#header hr {
    clear: both;
    border: 0;
    height: 1px;
    background: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:     -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:      -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
}
#menu ul { 
    margin: 0; 
    padding: 0; 
}
#menu li {
    display: block;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#menu a {
    color: white;
    text-decoration: none;
}
#menu a:hover {
    text-decoration: underline;
}
#menu a:active {
    text-decoration: underline;
    text-shadow: 0 0 2px white;
}
.righter {
    margin-right: 39px;
}
.righter2 {
    margin-right: 38px;
}

Thank you!

Answer 1

How about this?

#header-text {
color: #FFFFFF;
float: right;
font-size: 40px;
padding-top: 40px; }

Answer 2

I faced a similar problem recently. What I did was put the logo and the text in its own div. The outer div had display:inline-block so the image would expand the div to its minimum height, width:100% so it takes up all the width of the parent, and position:relative so the text can be absolutely aligned with the logo. I also removed the logo's bottom margin, which could be added to the outer div "header-top" if needed.

I know it's messy, but I haven't really found a better way myself. Anyway, this is what I came up with, is that what you wanted? http://jsfiddle.net/buqhK/3/embedded/result/