Related
I have two divs inside another div, and I want to position one child div to the top right of the parent div, and the other child div to the bottom of the parent div using css. Ie, I want to use absolute positioning with the two child divs, but position them relative to the parent div rather than the page. How can I do this?
Sample html:
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
#father {
position: relative;
}
#son1 {
position: absolute;
top: 0;
}
#son2 {
position: absolute;
bottom: 0;
}
This works because position: absolute means something like "use top, right, bottom, left to position yourself in relation to the nearest ancestor who has position: absolute or position: relative."
So we make #father have position: relative, and the children have position: absolute, then use top and bottom to position the children.
div#father {
position: relative;
}
div#son1 {
position: absolute;
/* put your coords here */
}
div#son2 {
position: absolute;
/* put your coords here */
}
Incase someone wants to postion a child div directly under a parent
#father {
position: relative;
}
#son1 {
position: absolute;
top: 100%;
}
Working demo Codepen
If you don't give any position to parent then by default it takes static. If you want to understand that difference refer to this example
Example 1::
http://jsfiddle.net/Cr9KB/1/
#mainall
{
background-color:red;
height:150px;
overflow:scroll
}
Here parent class has no position so element is placed according to body.
Example 2::
http://jsfiddle.net/Cr9KB/2/
#mainall
{
position:relative;
background-color:red;
height:150px;
overflow:scroll
}
In this example parent has relative position hence element are positioned absolute inside relative parent.
In a use case of needing a sticky floating "back button"/ "back to top" button. But you have the main content area that can shrink in favor of the side content area
You can use position: fixed; inside a container of position: absolute; to get a more flexible behavior similar to sticky but more powerful
function toggleOpen() {
const element = document.getElementById("sideContnet");
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
.container {
display: flex;
margin: 0 auto;
width: 600px;
}
.contentBig {
width: 600px;
min-width: 66%;
position: relative;
}
.contentSmall {
width: 230px;
min-width: 33%;
}
.absolute {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60px;
}
.fiexBack {
position: fixed;
background-color: red;
bottom: 20px;
padding: 5px;
}
.button {
width: 200px;
padding: 12px;
background-color: coral;
margin: 0 auto;
}
<button onclick="toggleOpen()" id="toggleSide" class="button">
toggle open side content
</button>
<div class="container">
<div class="contentBig">
<div class="absolute">
<div class="fiexBack">Back</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
<p>
Curabitur auctor ipsum ac interdum accumsan. Sed quis arcu mauris. Maecenas nibh ligula, tristique rhoncus pharetra vel, blandit non lectus. Suspendisse orci felis, faucibus sit amet rhoncus eu, ullamcorper et nulla. Ut in leo eu risus dignissim tempus sed sit amet leo. Etiam pulvinar lectus tincidunt turpis viverra maximus. Donec rutrum rutrum dui sit amet congue.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
</div>
<div id="sideContnet" class="contentSmall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
</div>
</div>
Full Code Example
I have two divs inside another div, and I want to position one child div to the top right of the parent div, and the other child div to the bottom of the parent div using css. Ie, I want to use absolute positioning with the two child divs, but position them relative to the parent div rather than the page. How can I do this?
Sample html:
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
#father {
position: relative;
}
#son1 {
position: absolute;
top: 0;
}
#son2 {
position: absolute;
bottom: 0;
}
This works because position: absolute means something like "use top, right, bottom, left to position yourself in relation to the nearest ancestor who has position: absolute or position: relative."
So we make #father have position: relative, and the children have position: absolute, then use top and bottom to position the children.
div#father {
position: relative;
}
div#son1 {
position: absolute;
/* put your coords here */
}
div#son2 {
position: absolute;
/* put your coords here */
}
Incase someone wants to postion a child div directly under a parent
#father {
position: relative;
}
#son1 {
position: absolute;
top: 100%;
}
Working demo Codepen
If you don't give any position to parent then by default it takes static. If you want to understand that difference refer to this example
Example 1::
http://jsfiddle.net/Cr9KB/1/
#mainall
{
background-color:red;
height:150px;
overflow:scroll
}
Here parent class has no position so element is placed according to body.
Example 2::
http://jsfiddle.net/Cr9KB/2/
#mainall
{
position:relative;
background-color:red;
height:150px;
overflow:scroll
}
In this example parent has relative position hence element are positioned absolute inside relative parent.
In a use case of needing a sticky floating "back button"/ "back to top" button. But you have the main content area that can shrink in favor of the side content area
You can use position: fixed; inside a container of position: absolute; to get a more flexible behavior similar to sticky but more powerful
function toggleOpen() {
const element = document.getElementById("sideContnet");
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
.container {
display: flex;
margin: 0 auto;
width: 600px;
}
.contentBig {
width: 600px;
min-width: 66%;
position: relative;
}
.contentSmall {
width: 230px;
min-width: 33%;
}
.absolute {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60px;
}
.fiexBack {
position: fixed;
background-color: red;
bottom: 20px;
padding: 5px;
}
.button {
width: 200px;
padding: 12px;
background-color: coral;
margin: 0 auto;
}
<button onclick="toggleOpen()" id="toggleSide" class="button">
toggle open side content
</button>
<div class="container">
<div class="contentBig">
<div class="absolute">
<div class="fiexBack">Back</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
<p>
Curabitur auctor ipsum ac interdum accumsan. Sed quis arcu mauris. Maecenas nibh ligula, tristique rhoncus pharetra vel, blandit non lectus. Suspendisse orci felis, faucibus sit amet rhoncus eu, ullamcorper et nulla. Ut in leo eu risus dignissim tempus sed sit amet leo. Etiam pulvinar lectus tincidunt turpis viverra maximus. Donec rutrum rutrum dui sit amet congue.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
</div>
<div id="sideContnet" class="contentSmall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
</div>
</div>
Full Code Example
I have two columns, both 50% of the screen-width. The left column is filled with text, the right column has an image that scales to the height of the text. Another image is placed over this first image, positioned in the bottom right corner. Even if the screen-width exceeds the image-width (and whitespace appears to the right of the image), the second image should stay aligned to the bottom right corner of the first one.
The setup you can see in the code below works in browsers other than Firefox. In Firefox, the second image is positioned as far right as possible, up to the original width of the first image. I think I've narrowed it down to the 100% height I give .image div, if I use a fixed height (i.e. 400px), the second image is aligned correctly. I need the percentage height though, to let the first image scale to the text height.
.wrapper {
overflow: hidden;
position: relative;
}
.text {
width: 50%;
position: relative;
}
.image {
width: 50%;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.image div {
position: relative;
display: inline-block;
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.image div:after {
content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
.image>div>img {
display: block;
height: 100%;
width: auto;
}
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div>
<img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg" />
</div>
</div>
</div>
You can see how it works in Codepen.
Any help would be appreciated.
It has to be a bug on firefox. Your code seems to be working under 1170px. So I have come up with a quick fix, I don't know whether it's applicable in your case or not.
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
overflow: hidden;
position: relative;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
.text {
width: 50%;
position: relative;
}
.image {
width: 50%;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
}
.image div {
position: relative;
display: inline-block;
vertical-align: top;
height: 100%;
max-width: 100%;
overflow: hidden;
}
.image div:after {
content: url("https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
.image>div>img {
display: block;
height: 100%;
width: auto;
}
.big-wrapper {
margin-left: auto;
margin-right: auto;
}
<body class="big-wrapper">
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est interdum
aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div>
<img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg" />
</div>
</div>
</div>
</body>
Update
This second version, Demo 2, has been stripped of all flex, fixed position, and even intrinsic measurements (vw). Firefox works and even IE surprisingly.
Changed the background-color to make it look spacier.
Major Changes
Added html,body {height:100%;width:100%}
.wrapper needed 100x100% as well.
Now .image and .text has a parent that their percentages can relate to.
Gave .image min-height:100%
Removed both <img> and used background-image
Optional Changes
Made .wrapper position:fixed
Made .text and .image position:absolute
.wrapper is a flex container
.wrapper has overflow-y:scroll so at smaller widths, text can still be read and it's scroll instead of auto so there be no jumpy behavior when the scrollbar pops in and out.
I also edited Marv as a PNG with a transparent background. P38 modulator not included.
Demo 1
html,
body {
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
border: 0;
}
.wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
display: flex;
justify-content: space-between;
height: 100%;
width: 100%;
}
.text {
position: absolute;
max-width: 49vw;
left: 0;
top: 0;
bottom: 0;
word-break: break-word;
margin: 0 10px 0 0;
padding: 10px;
flex: 0 1 auto;
}
.image {
min-width: 49vw;
min-height: 100%;
position: absolute;
background: url("https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg");
background-size: cover;
right: 0;
bottom: 0;
top: 0;
flex: 1 0 auto;
}
.marv {
background: url("https://image.ibb.co/h1pCQy/marv.png");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div class='marv'></div>
</div>
</div>
</body>
</html>
Demo 2
html,
body {
height: 100%;
width: 100%;
background-color:#000;
color:#fff
}
* {
margin: 0;
padding: 0;
border: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
.text {
position: absolute;
max-width: 50%;
left: 0;
top: 0;
bottom: 0;
word-break: break-word;
margin: 0 10px 0 0;
padding: 10px;
}
.image {
min-width: 50%;
min-height: 100%;
position: absolute;
background: url("https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg");
background-size: cover;
right: 0;
bottom: 0;
top: 0;
}
.marv {
background: url("https://image.ibb.co/hioYDJ/marv.png");
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 120px;
}
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="wrapper">
<div class="text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel enim vulputate, luctus dolor vel, efficitur ante. Maecenas eget massa eu mi varius posuere vel mattis ante. Cras non fermentum sapien. Nunc sollicitudin nisi a posuere commodo. Fusce
tincidunt mi velit, in hendrerit dolor cursus et. Nam laoreet laoreet varius. Aliquam ut elit at elit ultricies iaculis vitae at purus. Pellentesque massa mi, ultricies elementum consequat sit amet, aliquam vitae sem. Nulla tempus nec augue non
lacinia. In hac habitasse platea dictumst. Sed quis rhoncus urna, lobortis bibendum sapien. Morbi accumsan commodo malesuada. Praesent porta tortor sed tristique dignissim. Maecenas et urna sit amet tortor semper commodo at vitae lectus. Nullam
imperdiet viverra sem, pellentesque sagittis ipsum pellentesque a. Mauris rutrum nunc id lectus commodo rhoncus.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
<p>Etiam mollis massa id lorem rhoncus venenatis. Donec lacinia orci lacus, ac auctor augue vehicula vitae. Cras dignissim, augue vitae hendrerit cursus, enim velit lacinia tellus, sit amet sollicitudin dui mauris eget tortor. Donec eu nulla a est
interdum aliquet. Praesent et lectus interdum, malesuada felis sed, sagittis est. Pellentesque in accumsan diam. Nam tristique porttitor tortor. In rutrum tellus nisi, id condimentum tellus fringilla ut.</p>
</div>
<div class="image">
<div class='marv'></div>
</div>
</div>
</body>
</html>
You can add this code below your CSS to fix on Firefox. But it is only true if the image does not resize in width. So you can mix with #media to use.
#-moz-document url-prefix() {
.image div {
display: ruby-base;
}
.image div:after {
overflow: hidden;
}
}
I checked your code please replace image style rules as below:
.image > div > img {
display: block;
height: 100%;
width: 100%;
}
And after rules as below:
.image div:after {
content: url(https://vignette1.wikia.nocookie.net/uncyclopedia/images/6/67/Marvin_the_martian.jpg);
display: block;
position: absolute;
bottom: -100px;
right: -60px;
/* width: 100px; */
/* height: 120px; */
}
I tested in both chrome and firefox, it works.
I am trying to move my footer to the bottom and in the cases if the content is not long enough, then push it to the bottom of the screen. I read that it can be achieved solely by using css, however I couldn't achieve it.
I tried creating columns,
<body>
<div id="wrapper">
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</div>
</body>
Then, in my css, I tried using:
#footer {
height: 30px;
width:100%;
background-color: #2D2D2D;
position: absolute;
left: 0;
bottom: 0;
}
#wrapper {
background-color: purple;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
}
but no luck :/
Here I created it in bootply. Here, I added bunch of <br> tags to lengthen the content and added some text underneath. What I want is instead if content is short, stick the footer to the bottom of the page (not where content ends in the middle of the screen); and if content is long, where the content ends just below content.
What am I doing wrong/missing out?
Well, if you want it to always stay at the bottom, you can use this code. Remove the <p> tags and run again to test without text
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
position: relative;
padding-bottom: 5em;
box-sizing: border-box;
}
#content {
background: red;
}
footer {
height: 4em;
background: blue;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="wrapper">
<div id="content">
<p> Lorem ipsum dolor sit amet, adipiscing odio, vitae nulla luctus consectetuer, cras odio turpis adipiscing lobortis, tempor luctus morbi. Sed vitae id in, vel tempor mattis rutrum, eu non mauris in erat lectus enim, eget morbi quo imperdiet, mi lorem aliquam sed accumsan orci. Rhoncus nonummy turpis ipsum tempus tempor elementum, vestibulum sint tempor, accumsan mauris scelerisque rutrum. Eget rhoncus hendrerit, ipsum ipsum nunc sit ut arcu aenean, urna in justo reprehenderit mollis, suscipit erat, consequat suspendisse turpis duis nec pellentesque tristique. Lectus velit, vestibulum lorem enim turpis a eu mauris, mauris bibendum sociis lobortis sodales sed, eget rhoncus quisque consequat curabitur sit. Sodales velit et convallis interdum quis rutrum, dolor lobortis neque mi eget lorem, sed tincidunt dis convallis. Feugiat in conubia nec ipsum, nec rutrum nisl, vitae id vestibulum sollicitudin fringilla ac ligula, eget rutrum in. Tortor mollis amet, nulla pharetra nec in, vel vulputate nec eu diam, cras massa adipiscing pulvinar, id pulvinar massa dignissim. Quisque lorem enim vel orci vestibulum, consectetuer tincidunt et egestas.</p>
<p>
Donec nunc nec in, ut non lorem eget tortor facilisi sed, eget tempor a duis urna, pellentesque proin blandit et, mollis dictum dictum. Aliquet massa praesent vitae lorem at posuere, id lobortis nec id dignissim lorem nisi, at amet occaecati, duis enim quisque quam est, ultrices nunc semper vivamus praesent aenean nam. Natoque neque adipiscing, ipsum magna libero. Pellentesque mattis, fusce maecenas sit vel, accumsan eleifend et justo cras dui, wisi quisque interdum amet arcu bibendum, ante eget non mattis non. Iaculis congue cras feugiat. Platea aliquet suspendisse, orci nulla aliquam adipiscing in. Nullam libero velit in pellentesque diam est, urna phasellus, pellentesque porta eu. Ante lacus duis amet libero odio, accumsan neque tincidunt imperdiet, wisi praesent diam arcu et, erat aliquam feugiat ultricies tortor ullamcorper. Vestibulum sapien velit, ante fusce cursus volutpat tellus, eros officiis, ridiculus cum eu suscipit, felis dui sed nulla hac neque fermentum. Vivamus sagittis, malesuada nullam, dolor sit sed sollicitudin et maecenas fermentum, non nunc dapibus purus. Aliquam rhoncus aliquam sit fermentum, curabitur nulla accumsan.</p>
<p>
Nec consequat. Purus neque inceptos suscipit dictum, dolor massa ut egestas proin sed ultrices, eleifend at sed sit mi adipiscing sociis. Nostra laoreet metus nulla in. Urna eget, accumsan id mattis morbi, etiam a consequat curabitur, in felis vel. Aliquam feugiat sed, sit ligula sit praesent lobortis orci metus, nulla cursus mi velit vitae, a erat elit, velit ultrices consectetur libero perferendis libero. Risus sed, suspendisse urna in eget voluptas tristique, aliquam justo lectus, rutrum scelerisque, sem nibh qui dictum aliquet lacinia ut. Urna sagittis ac tristique gravida risus aliquam, dictum ipsum ac sodales, felis mauris repellendus porttitor aenean, orci vel feugiat nunc hendrerit. Porta eu, etiam pellentesque mauris et aliquam consectetuer donec, molestie dui magna enim, ac eu erat ut, lectus ligula feugiat urna per. Ornare aliquet ligula, ultricies sint arcu ipsum nulla. Vel ut vitae dui adipiscing.</p>
</div>
<footer>This is a footer</footer>
</div>
</body>
The trick is to use position: relative on the footer's container element and position: absolute on the footer to actually push it to the end of the container. Position: fixed isn't necessary.
https://codepen.io/cbracco/pen/zekgx
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
This example does the same thing with a container element over the entire page, instead of operating on the html and body tags.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This sends the footer to bottom of the bage no matter how much text you have:
.footer { background-color: #2D2D2D;
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 30px;/* or however high you would like */ }
html, body {
height: 100%; }
.wrapper { background-color: purple;
position: absolute;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
.footer, .push {
30px; }
.navbar {
background-color: red }
Ok, sorry for the misunderstanding, now it's fixed: http://www.bootply.com/N3XiwwGr9q#
I have two divs inside another div, and I want to position one child div to the top right of the parent div, and the other child div to the bottom of the parent div using css. Ie, I want to use absolute positioning with the two child divs, but position them relative to the parent div rather than the page. How can I do this?
Sample html:
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
#father {
position: relative;
}
#son1 {
position: absolute;
top: 0;
}
#son2 {
position: absolute;
bottom: 0;
}
This works because position: absolute means something like "use top, right, bottom, left to position yourself in relation to the nearest ancestor who has position: absolute or position: relative."
So we make #father have position: relative, and the children have position: absolute, then use top and bottom to position the children.
div#father {
position: relative;
}
div#son1 {
position: absolute;
/* put your coords here */
}
div#son2 {
position: absolute;
/* put your coords here */
}
Incase someone wants to postion a child div directly under a parent
#father {
position: relative;
}
#son1 {
position: absolute;
top: 100%;
}
Working demo Codepen
If you don't give any position to parent then by default it takes static. If you want to understand that difference refer to this example
Example 1::
http://jsfiddle.net/Cr9KB/1/
#mainall
{
background-color:red;
height:150px;
overflow:scroll
}
Here parent class has no position so element is placed according to body.
Example 2::
http://jsfiddle.net/Cr9KB/2/
#mainall
{
position:relative;
background-color:red;
height:150px;
overflow:scroll
}
In this example parent has relative position hence element are positioned absolute inside relative parent.
In a use case of needing a sticky floating "back button"/ "back to top" button. But you have the main content area that can shrink in favor of the side content area
You can use position: fixed; inside a container of position: absolute; to get a more flexible behavior similar to sticky but more powerful
function toggleOpen() {
const element = document.getElementById("sideContnet");
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
.container {
display: flex;
margin: 0 auto;
width: 600px;
}
.contentBig {
width: 600px;
min-width: 66%;
position: relative;
}
.contentSmall {
width: 230px;
min-width: 33%;
}
.absolute {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60px;
}
.fiexBack {
position: fixed;
background-color: red;
bottom: 20px;
padding: 5px;
}
.button {
width: 200px;
padding: 12px;
background-color: coral;
margin: 0 auto;
}
<button onclick="toggleOpen()" id="toggleSide" class="button">
toggle open side content
</button>
<div class="container">
<div class="contentBig">
<div class="absolute">
<div class="fiexBack">Back</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
<p>
Curabitur auctor ipsum ac interdum accumsan. Sed quis arcu mauris. Maecenas nibh ligula, tristique rhoncus pharetra vel, blandit non lectus. Suspendisse orci felis, faucibus sit amet rhoncus eu, ullamcorper et nulla. Ut in leo eu risus dignissim tempus sed sit amet leo. Etiam pulvinar lectus tincidunt turpis viverra maximus. Donec rutrum rutrum dui sit amet congue.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
</div>
<div id="sideContnet" class="contentSmall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
</p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
</p>
</div>
</div>
Full Code Example