CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
victorhooi
victorhooi

Reputation: 17275

Position HTML element relative to bottom of parent element using CSS?

I have several stacked HTML <section>s with background images. Within each <section>, I have a panel with content inside.

JSFiddle: http://jsfiddle.net/victorhooi/zRFzb/1/

JSFiddle Full-screen output: http://jsfiddle.net/victorhooi/zRFzb/1/embedded/result/

Ideally, I would like the main title (#proclaim) and the panels (.contentbox) to be a set pixel distance from the bottom of each background image.

However, I can't seem to achieve this.

I did try the position: relative; with an inner position: absolute; trick, combined with a value for bottom and that didn't seem to work at all - it actually sent all the boxes to the top of the page.

Currently, I'm using a mish-mash of positioning to try to get everything to fit.

However, when you change the browser window size or the resolution, the panels and text move everywhere.

Is there a way to affix the main heading, and the panels to a set distance from the bottom of their respective background images?

Upvotes: 5

Views: 10225

Answers (1)

Marcis
Marcis

Reputation: 4617

works just fine

section {
  position: relative;
}

.contentbox, #proclaim {
  bottom: 10px; // your value
  position: absolute;
}

Upvotes: 6

Related Questions