CODEWITHSUNDEEP
htmlcss
user985723
user985723

Reputation: 628

HTML-CSS - Unable to pull image down to bottom of div

I have an image that I'd like to pull down to the bottom of a div. In otherwords I want to convert this: bad align

To this:

good align

I have tried to do this with CSS using something like creating a class for the img and doing:

.align-bottom img {
  bottom: 0px;
}

That doesn't seem to do anything at all. If I set the position to be absolute then it puts the img at the bottom of the whole page and not just the div. How can this be done?

JSFiddle here: http://jsfiddle.net/uezwpw40/

Upvotes: 2

Views: 7794

Answers (4)

webmasterjunkie
webmasterjunkie

Reputation: 124

You would need to use positioning in order to use bottom like that. How about a CSS solution similar to this:

http://jsfiddle.net/gngur22r/

.titlebox {
    background-color:#ddd;
}

.bottom-background-arrow {
    background-image: url("http://www.clker.com/cliparts/Y/u/O/S/m/D/pyramid.svg");
    background-position: 20px bottom;
    background-size: 30px;
    background-repeat: no-repeat;
    padding-left: 60px;
}

This also allows you to retain the .row > .col-* formatted desired for bootstrap. Just change the background size and position as desired for better positioning.

Upvotes: 1

jmore009
jmore009

Reputation: 12931

Using bottom only works with relative, absolute, or fixed position elements so that will do nothing in this case. One way to do this with out using those would be to remove the float:left and use display: inline-block instead. inline-block elements align to the baseline by default (you would have to change the width of .col-xs-11 because of the spacing inline-block causes):

.col-xs-1, .col-xs-11{
  display: inline-block;
  float: none;
}

.col-xs-11{
  width: 90%;    
}

FIDDLE

**

OR

**

If you would prefer to use bottom you can set the parent .row to position: relative, reset .col-xs-1 to position: static and add position: absolute to your image:

.row{
  position: relative;
}

.col-xs-1{
  position: static;
}

.align-bottom img {
  position: absolute;
  bottom: 0px;
}

ALT FIDDLE

Upvotes: 2

buydadip
buydadip

Reputation: 9447

If you change the position to relative, you can position the image wherever you like:

.titlebox {
    height: 100px;
    background-color:#ddd;
}

.align-bottom img {
    position: relative;
    top: 70px;
}

I gave your .titlebox class a height so I can better guess where to position the image based on the dimensions of its encompassing div.

Here's a fiddle http://jsfiddle.net/uezwpw40/5/

Upvotes: 1

Deryck
Deryck

Reputation: 7668

Demo

Use the position: absolute; to position it with bottom: 0; and make sure the container has a position setting other than static (which is default if not specified).

CSS:

.titlebox {
    position: relative;
    background-color:#ddd;
    height: 100%;
}
.titlebox img {
    width: 30px;
    position: absolute;
    left: 0;
    bottom: 0;
}

HTML (changed part):

<div class="titlebox">  
  <img src="http://www.clker.com/cliparts/Y/u/O/S/m/D/pyramid.svg" width="30px">

You don't need it in its own <div> just put it wherever. It'll be absolute so other elements won't matter.

Upvotes: 3

Related Questions