2

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:

Header

(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.

Jan Tacci
  • 3,131
  • 16
  • 63
  • 83

2 Answers2

8

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;
}
DRD
  • 5,557
  • 14
  • 14
  • The reason why I floated the elements is because I wanted them side-by-side and I thought this was the only way. :O – Jan Tacci Jul 21 '14 at 04:02
  • Just put them side by side in the markup: http://jsfiddle.net/qQtG9/2/. When you display them on the newline you use carriage return character and browser treats it as a space. – DRD Jul 21 '14 at 04:03
  • What do you mean? In the html, put them side by side meaning don't nest them? – Jan Tacci Jul 21 '14 at 04:04
  • Okay, will do thanks! :) I never used fiddle before, that's cool! – Jan Tacci Jul 21 '14 at 04:05
  • Better yet, look at the updated code for my answer. The divs within the header are stacked next to each other in the HTML. – DRD Jul 21 '14 at 04:06
0

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

user3855157
  • 1