Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Position div to bottom of a different div, without using Absolute [closed]

Tags:

I have one div in another div. The inner div has margins of 0, auto to centralize it. However, I can't get it to float to the bottom without making it absolute. Is there anyway of making a relative div float to the bottom of a normal div?

like image 478
user3506938 Avatar asked Sep 30 '14 15:09

user3506938


People also ask

What can I use instead of absolute position?

Fixed. The fixed value is similar to absolute as it can help you position an element anywhere relative to the document, however this value is unaffected by scrolling.

How do I move a div to the bottom of the page?

Try position:fixed; bottom:0; . This will make your div to stay fixed at the bottom. Hope this helps.

Can you use Z index without position absolute?

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).


2 Answers

Without using position: absolute, you'd have to vertically align it.

You can use vertical-align: bottom which, according to the docs:

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

So, either set the outer div as an inline element, or as a table-cell:

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: bottom;
}

#inner {
  border: 1px solid green;
  height: 50px;
}
<div id="outer">
  <div id="inner">
  </div>
</div>
like image 183
LcSalazar Avatar answered Mar 22 '23 23:03

LcSalazar


Nowadays you can simply use display: flex for all these alignment issues.

In your case you can simply make the parent a flex, flex-direction column (the default is row) and justify-content: flex-end. The advantage of this approach is that it also works if you have multiple items in the parent.

If you have multiple ones and want to have them all aligned from the beginning of the parent till the end, you can change justify-content to another property such as space-between or space-evenly.

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

#inner {
  border: 1px solid green;
  height: 50px;
}
<div id="outer">
  <div id="inner">
  </div>
</div>
like image 40
Obed Parlapiano Avatar answered Mar 23 '23 00:03

Obed Parlapiano