HTML Header With Image And Text - Align Text To Bottom? - html

Question

I am writing an HTML page with CSS. At the top of my page I want to show a header with an image and text (image to the left of the text). The image size is 64 x 64 pixels and I want the text to be large.
I was able to do almost everything except I want to align the text at the bottom but, no matter what I do, I can't seem to get the text to stop placing itself at the top.
Here is the HTML for my header:
<div id="container" class="container">
<div class="header">
<div class="header image"></div>
<div class="header text">Header Text</div>
</div>
</div>
and here is the CSS;
.container .header {
height: 65px;
border:2px solid red;
}
.container .header .image {
background: url("../images/icon64.png") no-repeat;
float: left;
display: inline-block;
width: 65px;
border:2px solid green;
}
.container .header .text {
float: left;
display: inline-block;
vertical-align: bottom;
font-family: sans-serif;
font-size: x-large;
border:2px solid blue;
}
I have been reading several web pages after searching for how to do this. I found one page that seemed pretty straight forward. They said you have to use inline-block for the display property in order for vertical-align to be honored.
I changed my CSS to what you see above but that still did not work. Here is what my header looks like:
(Note the border coloring is just for visualizing what's going on.)
Can anyone tell me what I am doing wrong and how to fix it so that my text is vertically aligned at the bottom?
Thank you.

Answer 1

That is correct, set elements as inline-blocks and use vertical-align. However, that means not to float the elements! Floated elements are floats and you negate the display: inline-block declaration: http://jsfiddle.net/qQtG9/2/ (I've cleaned your code some).
HTML:
<div class="header">
<div class="image"></div><div class="text">Header Text</div>
</div>
CSS:
.header {
border:2px solid red;
}
.header .image {
background: url("http://placehold.it/64x64")
no-repeat;
width: 65px;
height: 65px;
border:2px solid green;
}
.header .text {
font: x-large sans-serif;
border:2px solid blue;
}
.header .image,
.header .text {
display: inline-block;
vertical-align: bottom;
}

Answer 2

You can also try giving the #header a position:relative
and then give the .text position absolute, so if you give bottom:0; it will be stack to the bottom of the #header div