Bottom aligned div without disabling Bootstrap column floats - html

Question

I guess this might be impossible, but perhaps any expert can help me out with this. I'm trying to get a quite simple reponsive behaviour working:
A two columns layout, logo left, navbar right. Now the navbar should be aligned at the bottom of the second column for bigger screens and floating to the next line directly under the logo on smaller screens.
Bigger screen:
Smaller screen:
I suppose this can be done only with JS so far, but maybe anyone knows a way to get this realized with pure CSS.
HTML:
<div class="container">
<div class="row">
<div id="col1" class="col-xs-12 col-sm-3">
<div id="logo">Logo</div>
</div>
<div id="col2" class="col-xs-12 col-sm-9">
<div id="navbar">Navbar: tab 1 | Nav tab 2 | Nav tab 3</div>
</div>
</div>
</div>
CSS:
#logo {
background-color: red; height: 100px; width: 150px; color: white;
}
#navbar {
background-color: blue; height: 30px; width: 100%; color: white;
}
I've set up a jsfiddle with the full code: http://jsfiddle.net/m4s4uqhx/6/
Any help is greatly appreciated.

Answer 1

set the height of col-2 similar to logo and set the navbar to position absolute and bottom 0 . replace your css with this solution
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#col1 {
//border: 1px solid darkred; padding: 0px;
}
#col2 {
//border: 1px solid darkblue; padding: 0px;
}
#logo {
background-color: red; height: 100px; width: 150px; color: white; padding: 5px;
}
#navbar {
background-color: blue; height: 30px; width: 100%; color: white; padding: 5px;
}
#media only screen and (max-width : 992px){
#navbar{
position: absolute;
bottom: 0px;
}
#col2{
height: 100px;
}
}
#media only screen and (max-width : 768px){
#navbar{
position: relative;
}
#col2{
height: auto;
}
}

Answer 2

If the sizes of your elements are fixed as in your example, you can do the trick with padding-top, and remove it when the screen is too small (xs: <768px).
#media(min-width: 768px) {
#col2 {
padding-top:70px;
}
}
Demo on JSFiddle
Else, I guess you will have to write some JavaScript :)

Answer 3

If you know the exact height of you logo then you can add a padding top to the #col2 div on bigger screens using media queries
tablets and greater #media(min-width:778px){...}
desktops and greater #media(min-width:992px){...}
large screens #media(min-width:1140px){...}
Css example
#media(min-width:992px){
#col2{padding-top:70px;}
}
Working example
http://www.bootply.com/SHj7pkKt80

Answer 4

The issue here is that the columns are not equal height. CSS only offer a couple of options for equalising columsn heights. CSS Tables and Flexbox.
You can leave the floats in place but flexbox will override the floating to a certain extent.
Nevertheless, the impact can be minimal depending on your requirement.
Codepen Demo
#logo {
background-color: red;
height: 100px;
width: 150px;
color: white;
}
#navbar {
background-color: blue;
height: 30px;
width: 100%;
color: white;
}
.row {
display: flex;
flex-wrap: wrap;
}
#col2 {
display: flex;
align-items: flex-end;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="col1" class="col-xs-12 col-sm-3">
<div id="logo">Logo</div>
</div>
<div id="col2" class="col-xs-12 col-sm-9">
<div id="navbar">Navbar: tab 1 | Nav tab 2 | Nav tab 3</div>
</div>
</div>
</div>