I have a div that is 50% the width of the screen and 100% height.
I want to have an image placed at the bottom of the div that will adjust with the width.
To set the position I use position: absolute; but this removed the auto width:
code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
}
.bottomImage {
width: auto !important;
width: 100%;
max-width: 100%;
position: absolute;
bottom: 0;
width: auto;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="events_bottom.png" />
</div>
</div>
Is there any way to have an image positioned absolute and adjust to container width?
Adding position: relative to #aaaaa allows the image width and offsets to be computed with respect to the #aaaaa block's width and position.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#full-size {
height: 100%;
width: 100%;
overflow: hidden;
}
#aaaaa {
width: 50%;
height: 100%;
background: #0F0;
float: left;
position: relative;
}
.bottomImage {
width: 100%;
position: absolute;
bottom: 0px;
left: 0;
}
<div id="full-size" class="clearfix">
<div id="aaaaa">
<img class="bottomImage" src="http://placehold.it/300x50" />
</div>
</div>
You could try this:
.aaaaa {
position: relative;
}
.bottomImage {
position: absolute;
left: 0;
right: 0;
}
https://jsfiddle.net/1oxy7odv/
HTML
<div>
<img />
</div>
CSS
div {
display: block;
position: relative;
width: 500px;
height: 500px;
background: black;
margin: 50px auto;}
img {
display: block;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: red;
height: 25px;}
you could use another positioning for your bottomImage to size with its parent container:
.bottomImage {
position: absolute;
top: 0; //or whatever position from top
left: 0;
right: 0; //important !!! this way its always on the rightest(?) position of the parent)
bottom: 0;
}
You can also try this:
.bottomImage {
width: inherit; /*inherits width from div.aaaaa*/
max-width: 100%;
position:absolute;
bottom:0;
}
Related
I am trying to align a fixed div to the bottom inside another fixed div. I have seen on stackoverflow that we can use an absolute div as a wrapper to position a fixed div
Here levelTwo div is fixed and wrapper levelTemp is absolute to align the fixed child div to the bottom and levelThree is the fixed child div.
The expected output for me should be like this:
but it is like this:
Solution 1:
One way is to specify height of the levelTemp div of 50px but in my case the height of levelThree div can vary.
.levelOne {
position: relative;
}
.levelTwo {
height: 150px;
width: 150px;
background: gray;
position: fixed;
right: 0;
}
.levelTemp {
position: absolute;
bottom: 0;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
position: fixed;
}
<div class="levelOne">
<div class="levelTwo">
<div class="levelTemp">
<div class="levelThree">
</div>
</div>
</div>
</div>
Using position:fixed
body {
margin: 0;
}
.levelOne {
position: relative;
}
.levelTwo {
height: 150px;
width: 150px;
background: gray;
position: fixed;
right: 0;
}
.levelTemp {
position: absolute;
bottom: 0;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
position: fixed;
top: 100px;
}
<div class="levelOne">
<div class="levelTwo">
<div class="levelTemp">
<div class="levelThree">
</div>
</div>
</div>
</div>
using position:absolute;
body {
margin: 0;
}
.levelOne {
position: relative;
}
.levelTwo {
height: 150px;
width: 150px;
background: gray;
position: absolute;
right: 0;
}
.levelTemp {
position: relative;
height: 100%;
width: 100%;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
position: absolute;
bottom: 0;
}
<div class="levelOne">
<div class="levelTwo">
<div class="levelTemp">
<div class="levelThree">
</div>
</div>
</div>
</div>
This is what you want?
.levelTemp {
/* bottom: 0; */
/* overflow: hidden; */
bottom: 0;
position: absolute;
}
.levelThree {
height: 50px;
width: 50px;
background: red;
/* position: fixed; */
/* bottom: 0; */
}
I have problem with how to make children size following its parent. The case below.
HTML
<div class="video">
<div class="spot">
<img src="..." alt="">
<button>x</button>
</div>
</div>
CSS
.video {
width: 600px;
height: 500px;
background: #000;
position: relative;
}
.spot {
position: absolute;
max-height: 30px;
top: 0;
left: 0;
display: table;
margin: 0;
max-width: 100%;
/* width: 16%; only height can affect image on content*/
}
.spot img {
width: 100%;
height: 100%;
}
.spot button {
position: absolute;
top: 0;
left: 100%;
margin-left: -24px;
}
What I want to do is to make the image follow the spot height. Because if I set width (whatever size), the image will follow the spot width. Anyone know how to do this?
I also create jsfiddle https://jsfiddle.net/isatrio/yosfep6r/14/.
Your image is already following your .spot height. Check the border on spot. Or do you mean overflow? Or do you want your .spot to follow your .video?
console.log(".spot height: " + $(".spot").innerHeight());
console.log("img height: " + $(".spot img").height());
.video {
width: 600px;
height: 500px;
background: #000;
position: relative;
}
.spot {
border: red 2px solid;
position: absolute;
height: 40%;
/*width: 20%;*/
top: 0;
left: 0;
margin: 0;
padding: 0;
max-width: 100%;
overflow: hidden;
}
.spot img {
/*width: 150%;*/
height: 100%;
}
.spot button {
position: absolute;
top: 0;
left: 100%;
margin-left: -24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
<div class="spot">
<img src="https://creativeblossoming.files.wordpress.com/2013/10/navy-living-room.jpg" alt="">
<button>x</button>
</div>
</div>
You have set max-width instead of width. max-width will not set the width to the given value, it will just prevent the width from surpassing the given value.
.spot {
position: absolute;
height: 30px;
top: 0;
left: 0;
display: table;
margin: 0;
width: 100%;
}
I am attempting to use the overflow: visible; property in order to show a child element passing the parent element. My attempt is failing and the child element (the image) is getting cut off at the top of the parent element.
Does anyone see what I am doing wrong?
#blue {
height: 150px;
width: 100%;
background: blue;
}
#redBanner {
width: 100%;
height: 150px;
background: #b22525;
position: relative;
overflow: visible;
}
#redBannerImg {
position: absolute;
bottom: 0;
right: 10%;
width: 40%;
height: auto;
}
<section id="blue">
</section>
<section id="redBanner">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="" id="redBannerImg">
</section>
If you use top: 0;instead of bottom: 0; it works, but not sure if that brokes your design.
#redBanner {
width: 100%;
height: 150px;
background: #b22525;
position: relative;
overflow: visible;
}
#redBannerImg {
position: absolute;
top: 0;
right: 10%;
width: 40%;
height: auto;
}
<section id="redBanner">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="" id="redBannerImg">
</section>
I can't seem to figure out why my project-img-text-container is falling outside of its parent div project-image-container and project-img-main. I added in project-image-container to combat this issue, but it did nothing and I am drawing a blank. I have both containers set to relative, so not sure why project-img-text-container is falling out when it is set to absolute.
Anyone see why?
#project-img-main {
position: relative;
margin: 0;
width: 100%;
height: auto;
}
#project-image-container {
width: 100%;
height: 100%;
position: relative;
}
#project-img-window {
max-height: 700px;
/*background: rgba(0,0,0,0);*/
width: 100%;
}
#project-img-text-container {
background: rgba(0,0,0,.7);
position: absolute;
width: 33%;
height: 100%;
left: 60%;
z-index: 99;
}
#project-img-text {
color: #FFF;
font-size: 2em;
}
<div id="project-img-main">
<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
<div id="project-img-text-container">
<div id="project-img-text">Test</div>
</div>
</div>
</div>
#project-img-text-container {
top:0;
}
When setting something as position absolute, you need to specify it's position within the document or containing element.
If you are not going to use a defined height, position: relative alone can not hold the element within. Since project-img-text-container position property value is absolute, you need to add top:0 to its block of CSS.
#project-img-main {
position: relative;
margin: 0;
width: 100%;
height: auto;
}
#project-image-container {
width: 100%;
height: 100%;
position: relative;
}
#project-img-window {
max-height: 700px;
/*background: rgba(0,0,0,0);*/
width: 100%;
}
#project-img-text-container {
background: rgba(0,0,0,.7);
position: absolute;
width: 33%;
height: 100%;
top: 0; /* This has to be 0 to bring it up to the top */
left: 60%;
z-index: 99;
}
#project-img-text {
color: #FFF;
font-size: 2em;
}
<div id="project-img-main">
<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
<div id="project-img-text-container">
<div id="project-img-text">Test</div>
</div>
</div>
</div>
Try adding
img{
position: absolute;
}
Working fiddle: https://jsfiddle.net/rittamdebnath/hwj28zm3/
Unable to scroll when cursor is over the blue block at the top, any ideas of where I'm going wrong?
JSFiddle Demo
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: fixed;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$(".wrapper").scrollTop(300);
As you have the position to be fixed for the class block it will prevent the scrollbar from working. So change the position for class block.
Removed the wrapper div and add the "body" to the javascript
Update
http://jsfiddle.net/cr8uj/7/
JS
$( "body" ).scrollTop( 300 );
You have used css position: Fixed;, so class block will not move from its position and scrollbar will not work on mousehover event
HTML
<div class="wrapper">
<div class="block">
block
</div>
<div class="content">
content
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
background: #ccc none repeat scroll 0 0;
width: 100%;
height: 100%;
overflow: auto;
}
JS
$( ".wrapper" ).scrollTop( 300 );
here is fiddle
please do not use fixed property on .block class
body {
margin: 0px;
padding: 0px;
}
.block {
background: blue;
height: 300px;
width: 100%;
position: absolute;
}
.content {
background: red;
margin-top: 300px;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: absolute;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}