CODEWITHSUNDEEP
cssvertical-alignment
Joanhard
Joanhard

Reputation: 89

vertical-align bottom not work

I need all text in <a href="#"><strong>Home</strong><span>This is a home</span></a> placed at bottom but css code not working.

css

a { text-decoration: none; color: #777; }

.menu {
    margin: 0;
    list-style: none;
}
.menu li {
    position: relative;
    display: inline-block;
}
.menu li a {
    position: relative;
    height: 100px;
    display: block;
    width: auto;
    border: 1px solid #eee;
    background: #fbfbfb;
    padding: 10px 20px;
}
.menu li a span,
.menu li a strong {
    display: block;
    border-bottom: 1px solid #bfbfbf;
    vertical-align: bottom;
}

the live code here http://jsfiddle.net/wgjfL/

Thanks in advance

Upvotes: 0

Views: 7470

Answers (2)

Asynchronous
Asynchronous

Reputation: 3977

Just do the following on your main nav:

clear: both;

This will ensure that your links will always be at the bottom of anything above it.

You can also use:

float: left;

Then

clear: none;

on the other elements. Which will force them not to wrap around the text.

Guy

Upvotes: 0

Nitesh
Nitesh

Reputation: 15739

You need to remove the position:relative; from the menu li a class and apply a display:table-cell; for it to work.

Here is the WORKING SOLUTION

The Code:

.menu li a {
    background: none repeat scroll 0 0 #FBFBFB;
    border: 1px solid #EEEEEE;
    display: table-cell;
    height: 100px;
    padding: 10px 20px;
    vertical-align: bottom;
    width: auto;
}

To understand the full Logic of how and when to use vertical-align, refer to THIS ARTICLE.

Hope this Helps.

Upvotes: 5

Related Questions