How to align div at the bottom of another div (it's floating up..) - alignment

I can't figure out how to bottom-align the WHITE "LIKE" DIV div in this illustration, so it appears at the very bottom of the comment, instead of floating up, when the user only wrote a few lines in his post.
Need advise on either CSS or HTML approach to this, depending on which will do the job.
![Floating div](https://images.vfl.ru/ii/1409154367/984280d6/6144732.png
)
http://bibelkristna.com/viewtopic.php?f=7&t=12 has some likes.
In order to see the likes, use thastrom/test123

Check out this answer obtain from similar question, that was previous asked.
#b {
position: relative;
}
#c {
position: absolute;
bottom: 0px;
}
The trick is position: relative; on the parent element. Without that, #c will float away to the bottom of the page.

Related

Reveal.js How to use floating images in animations

I am looking at making an animation using auto-animate and 2 slides.
The animation is made of 5 images.
Using <image> stack me the images on an horizontal line .. using divs stack them vertically.
I would like the second slide to arrange the images on a diagonal.
The best for me would be to position the images freely but I don't know how to do that :( ?
To position an item in CSS, try this:
<style>
#image1 {
position: absolute;
top: 100px;
left: 100px;
}
</style>
<img src='my-image.jpg' id='image1'/>
See https://www.w3schools.com/cssref/pr_class_position.asp for more details.
:)

responsive images with position absolute in bootstrap 3

I'm new in using bootstrap 3. I need your help on how to make images responsive while using position absolute, top and left? My images are on top of one image and whenever I re-size the browser the images will not be in their place anymore(desktop size).
from http://www.w3schools.com/cssref/pr_class_position.asp
so something like this: (in one of the relevant .css files)
img.topleftStuck {
position: absolute;
left: 100px;
top: 150px;
}
then something like this:
<img src='path/to/crappy_image.gif' class=topleftStuck>
this can also be achieved with div in similar fashion.. :)

How to remove Extra space below the footer?

i have problem with my page, when it reaches to 768X1024 a big space below my footer exist, i looked some answers here at stackoverflow but i can't find one. can you help to fix it?
here's my http://jsfiddle.net/craybac/pb0d6zda/5/
and here's the image problem:
![enter image description here][1]
Use position absolute instead of position relative
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
Use postion:absolute,solve your problem.
here is
fiddle link:
Still your problem is not solved.use the below css
html,
body{
height:100%;
}
use some id wrapper after body and close that tag in before closing body tag.
and add the below css.
#wrapper {
min-height:100%;
position:relative
}

Absolute positioned div won't stay in place

Okay so I have these divs called "latestWorkTitle" which are positioned absolute and are placed on top of the corresponding image to show its title.
However, I can't get this properly to work. The titles don't show at the corresponding image and when I resize my browser window everything shifts and so on.
I tried creating this jsbin http://jsbin.com/uhoxef/1 with a part of my code to illustrate how it should look like and what is going wrong. Even all the titles go on top of each other in the code while they should be on top of the corresponding images... I'm just basically totally lost at this.
I think the HTML was confusing itself. I also made the thumbnail class the relative layer. HTML renders as we read, from left to right. So putting the title before the image causes the image to show on top and cover the text.
HTML:
<div class="thumbnail">
<a href="portfoliodetail.php?id=10">
<img src="http://www.hlnarchitects.com/img/plain_red.png" />
<div class="latestWorkTitle">title1</div>
</a>
</div>
CSS:
.thumbnail {
position: relative;
overflow: hidden;
float: left;}
.portfolioOverview img {
width: auto;
height: auto;}
.latestWorkTitle {
text-align: right;
font-size: 11px;
text-transform: uppercase;
background: yellow;
position: absolute;
padding: 6px;
top: 0;
left: 0;}
For this to work, each thumbnail class needs to be the relative start for each individual layer. So the thumbnail class is set to relative.
Any object set to absolute (.latestWorkTitle) within this layer will start from the top and left position of the relative object.
You'll need to adjust some details to taste but I hope this helps.

link rollover to change the background image

is there a way to alter a background when you rollover a link? im making a degree show website and want a large sample image to appear in the background when you rollover the link of persons name. i have an image appearing, however its covering all the text and in a fixed position over the link. is there a way to do this so it just alters the background image and stays behind all the other text on the page?
heres what im working with
#hover_img img
{
display:none;
}
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
}
html
<div id="hover_img">LINK<img src="image" alt="" /></a></div>
thanks!
** fiddle http://jsfiddle.net/5yhsL/ **
Add z-index: -1 to the image on hover:
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
z-index: -1;
}
You can accomplish this by putting the text inside another element adjacent to your image element. Absolutely positioned elements will take dominance over their neighbors, and one way you can get around that is by assigning a value to the position property for subsequent elements.
Here is a jsfiddle I've whipped up:
http://jsfiddle.net/93mpW/3/

Resources