CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
PaulJ
PaulJ

Reputation: 1708

Bootstrap: align element to bottom doesn't work

I have a problem similar to this one:

Bootstrap 3 Align Text To Bottom of Div

Except that its proposed solution doesn't work in my case. My HTML is:

<header class="masthead">
    <a class="navbar-brand" href="index.php"><img src="logo.png" alt="My Logo"></a>
    <div class="container-fluid">
        <div class="navbar-right" id="nav_derecha">
            <ul id="lang">
                <li><a href=""><img src="es.png" alt="Español"></a></li>
                <li><a href=""><img src="en.png" alt="English"></a></li>
                <li><a href=""><img src="fr.png" alt="Français"></a></li>
                <li><a href=""><img src="de.png" alt="Deutsch"></a></li>
            </ul>           
            <ul id="login_area">
                Login | Register
            </ul>
        </div>
    </div>          
</header>

And my CSS is:

header.masthead {
    background-color: #103961;
    height: 82px;
    margin-bottom: 0px;
    box-shadow: none;
}    
header.masthead nav {
    background: #339966;
    border: 0px;
    box-shadow: none;
    /* max-width: 1100px; */
    margin-left: auto;
    margin-right: auto;
}    
.navbar-brand > img {
    width: 270px;
}


@media only screen and ( min-width: 768px ) {
    #nav_derecha {
        position: relative;
        }
    #login_area {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

#login_area li a{
    color:white !important;  
}

#lang  li {
    display: inline;
    }

Using the "position:absolute" trick, the login/register links appear right on top of the language bar. I want the language bar to appear on the upper-right corner, and the login area below it, aligned to the bottom of the header. How can I do this?

Upvotes: 2

Views: 2331

Answers (2)

Jason D.
Jason D.

Reputation: 480

I think something like this, is what you are looking for:

.nav-holder{
   display:inline-block;   
   vertical-align:top;
}

#lang{
   -webkit-padding-start: 0; 
   margin:0;
}

http://jsfiddle.net/1w6xr92j/7/

Need to make block elements inline-block elements, so that they sit side by side.

Also, I saw some padding that webkit was putting on the ul by default, so I took that off.

Aligning vertically to the top is all we needed to get the links to sit up at the top.

edit: positioning your masthead relatively, and then your container fluid, absolutely, will contain your links as you want. You can then also set your "right" property so that the container sits however far away from the right side you want.

If you would like anything else clarified, just let me know.

Upvotes: 2

blurfus
blurfus

Reputation: 14031

I changed two sections of your CSS to this:

@media only screen and ( min-width: 768px ) {
    #nav_derecha {
        position: relative;
        }
    #login_area {
        position: absolute;
          text-align: right; /* used to say bottom:0; right: 0 -> you can remove this line too, if you wish */
    }
}

#login_area{ /* there is no li a  inside this ul, so I removed them from the css */
    color:white !important;  
}

See updated bootply

Upvotes: 2

Related Questions