CODEWITHSUNDEEP
htmlcssposition
Scheintod
Scheintod

Reputation: 8105

Css: Position element by it's bottom relative to it's container's top

I have an div element with variable height which I need to be positioned by it's bottom relative to the containers top.

This must be done without changing the html.

e.g.

<div id="container">
    <h1>Some Text<br/>more...</h1>
</div>

h1's bottom should be 100px below #container's top.

Thanks a lot

EDIT:

So by Request what I did (or didn't) tried:

Upvotes: 9

Views: 6239

Answers (4)

Jesse Kernaghan
Jesse Kernaghan

Reputation: 4634

Depending on browser support requirements:

#container {
    position: relative;
}

#container h1 {
    position: absolute;
    bottom: calc(100% - 100px);
}

Example

Upvotes: 6

Weafs.py
Weafs.py

Reputation: 22992

You could make use of transform: translateY(-100%), to make the bottom of the element relative when you apply margin-top: 100px to h1.

#container {
  width: 200px;
  height: 200px;
  background: tan;
  overflow: hidden;
}
#container h1 {
  transform: translateY(-100%);
  margin-top: 100px;
  background: papayawhip
}
<div id="container">
  <h1>Some Text<br/>more...</h1>
</div>

Upvotes: 17

java.manish.2015
java.manish.2015

Reputation: 1071

#container
{
    position: absolute;
    height: 100px;
    bottom:0px;
}

This code is not affecting html at all. I added css for id-container. An absolute position element is positioned relative to the first parent element that has a position other than static. You can change it to fixed it you wants to.

Height of the container, help you to calculate spacing from bottom.

Upvotes: 0

eliteware
eliteware

Reputation: 144

Only way through it is to add a height to the h1 unless you want to go with calc which isn't supported yet by some browsers. Then set your top margin to be top: 100px - h1's height. Hope this works

<div id="container">
  <h1>Some Text<br/>more...</h1>
</div>

#container {
  width: 300px;
  height: 300px;
  background: #222;
  overflow: hidden;
}
#container h1 {
  background: #444;
  position:relative;
  height:80px;
  top:20px;
}

http://jsfiddle.net/ms889w57/

Upvotes: 0

Related Questions