CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Stefan
Stefan

Reputation: 327

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.

Upvotes: 0

Views: 99

Answers (4)

ustmaestro
ustmaestro

Reputation: 1283

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

Upvotes: 1

Ashish Patel
Ashish Patel

Reputation: 941

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;
 }
}

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115061

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>

Upvotes: 0

Mistalis
Mistalis

Reputation: 18279

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

Upvotes: 2

Related Questions