Stefan Müller Stefan Müller - 1 month ago 4
CSS Question

Bottom aligned div without disabling Bootstrap column floats

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:

enter image description here

Smaller screen:

enter image description here

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

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 :)