vertical-align: bottom; don't work with a display: inline-block; element

Question

First, my HTML markup:

<nav>
  <section class="navabout">
    ABOUT
  </section><section class="navphotography">
  PHOTOGRAPHY
  </section><section class="navdesign">
  DESIGN
  </section>
</nav>

And my CSS code for it:

nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
nav > section{
    width: 33%;
    height: 100%;
    display:inline-block; /*http://stackoverflow.com/q/11805352/1584286*/

    font-size: 60px;
    font-family: 'Bebas Neue', arial, helvetica, sans-serif;
}

nav > section.navabout{
    background: url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center; 
    background-size: cover;

    text-align: left;
}
nav > section.navphotography{
    background: url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center; 
    background-size: cover;

    text-align: center;
    vertical-align: text-bottom;
}
nav > section.navdesign{
    background: url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center; 
    background-size: cover;

    text-align: right;
}

Question

I want the Photography font stick at the bottom of the section. So I found the CSS code vertical-align and read this article by CSS-Tricks. There is written the following:

In order for this to work, the elements need to be set alone a baseline. As in, inline (e.g. , ) or inline-block (e.g. as set by the display property) elements.

So it should work in my code, then CSS-Tricks also say:

text-bottom - Aligns the bottom of the element with the bottom of the parent element's font.

But strangely, the other two sections' font are sticking to the bottom WITH the background image (so the whole section tag sticks to the bottom).

I thought, maybe it won't work because of the parent element font. So I set the value to bottom. But now nothing changed.

Can you help me to let the font of the Photography section stick to the bottom (only the font!)

PS: and yes I know, this CSS won't work in IE6 & 7, but my whole site will only work in modern browsers.

Codepen Demo for you

This is a really bad use of `
` - read this: http://webdesign.about.com/od/html5tags/a/when-to-use-section-element.htm — Bill, Feb 25 '14 at 16:16
You should use a `
` for navigation bars, as they are a *list* of items. — Bill, Feb 25 '14 at 16:18
@BillyMathews: Thank you for your article! I read that I should use a-links in a `
` section, but I don't want to have links. And I don't have a navigation-"bar", the navigation will be fullscreen. So is the use of `
` good practice? — , Feb 27 '14 at 07:44
It is still a *list* of items, right? So you should use a `
` - unordered list, or maybe an `
` - an ordered list. — Bill, Feb 27 '14 at 10:47

score 0 · Answer 1 · answered Feb 25 '14 at 16:27

How about this for an alternative approach:

FIDDLE

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>
            <div>ABOUT</div>
        </div>
        <div class='cell'>
            <div>PHOTOGRAPHY</div>
        </div>
        <div class='cell'>
            <div>DESIGN</div>
        </div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
}
.table {
    display:table;
    width:100%;
    height:100%;
    font-size: 60px;
    font-family:'Bebas Neue', arial, helvetica, sans-serif;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    text-align: left;
    position:relative;
}
.cell:nth-child(1) {
    background:url(http://eofdreams.com/data_images/dreams/face/face-01.jpg) no-repeat center;
    background-size: cover;
}
.cell:nth-child(2) {
    background:url(http://www.digitaltrends.com/wp-content/uploads/2010/02/digital-camera-buying-guide-header.jpg) no-repeat center;
    background-size: cover;
}
.cell:nth-child(3) {
    background:url(http://media.peugeot.com/images/backgrounds/design/concept-peugeot-design-lab.jpg) no-repeat center;
    background-size: cover;
}
.cell > div {
    position:absolute;
    bottom:0;
}

If you are going to use tables you may as well just go ahead and use a table. But don't use a table. — Bill, Feb 27 '14 at 10:38

vertical-align: bottom; don't work with a display: inline-block; element

1 Answers1

FIDDLE