positioning a column at the bottom of a row

StackOverflow https://stackoverflow.com/questions/23209820

Question

Hey guys i am using bourbon neat. I a in a dilemma here as i have to position the logo at the bottom of the page or probably 20% above bottom. i have this blue row that is spanning 3.5 columns of the full width container. Now inside that row, i have inserted a logo column and have it covered all 12 columns nested. How can I take that logo column which is 12 column nested to bottom of the outer row.

Giving the logo row possition absolute or fixed breaks the row from out container and spreads the whole screen.

enter image description here

here is my html Code

<body>
<div class="introContainer">

    <!-- Intro Deck -->
    <div class="introBar">

        <div class="introLogo">
            <img src="img/badge.png" height="156" width="156" alt="">

        </div>
    </div>

</div>

and heres is the generated css

  * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  margin: 0;
  padding: 0; }
  body img {
    max-width: 100%;
    height: auto; }

.introContainer {
  *zoom: 1;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%;
  position: fixed;
  background-image: url("../img/coverBg.jpg");
  background-size: cover;
  background-position: 50%; }
  .introContainer:before, .introContainer:after {
    content: " ";
    display: table; }
  .introContainer:after {
    clear: both; }
  .introContainer .introBar {
    background-color: rgba(42, 196, 234, 0.9);
    float: left;
    display: block;
    margin-right: 0%;
    width: 29.16667%;
    height: 100%; }
    .introContainer .introBar:last-child {
      margin-right: 0; }
  .introContainer .introLogo {
    float: left;
    display: block;
    margin-right: 0%;
    width: 100%;
    border: 3px solid green;
    bottom: 22px; }
    .introContainer .introLogo:last-child {
      margin-right: 0; }
Was it helpful?

Solution

Please, the next time please use a jsfiddle to show your code so it's easier for us to give you a quick answer. Regarding to your question, try adding the css property position: relative to your .introBar css rule, so you'll have:

.introBar{
  position: relative;
}

then, you can position absolute your .introLogo regarding to .introBar.

.introLogo{
  bottom: 20%;
  position: absolute;
  width: 100%;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top