Is there any way of css floating elements from the bottom? [duplicate] - html

Question

This question already has answers here:
CSS - How to align image left bottom to the text block?
(5 answers)
Closed 6 years ago.
Given the below HTML:
<div>
lorem ipsum...
<img style="float:left;margin-top:-100px" />
</div>
I would expect to get something like this:
But what I actually end up getting is this:
.Block {
width: 300px;
margin: auto;
}
.Image {
width: 150px;
float: left;
margin-top: -100px;
}
<div class="Block">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
<br><br>
Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper.
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" />
</div>
Here is a pen showing how the code behaves. Is something like this possible? Why does margin-bottom result in behaviour that I would expect but margin-top does not?

Answer 1

There are few ways through which you can align img tag and add some more tags for text and get result as your first img as you have asked in your question.
Solution 1 :- We have added 2 <p> tags. And then added margin-left to 2nd <p> tag using nth-child() selector, which is equal to the width of image+10px . And negative value too is added to bring img tag to top and replace 2nd <p> tag.
.box{
width:300px;
margin:auto;
position:relative;
}
.box > p:nth-child(2){
margin-left:110px;
}
.image{
width:100px;
margin-top:-140px;
float:left;
}
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p>
<p>
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est.
</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
</div>
Solution 2:- We have added 2 <p> tags. But this time no negative margin is added to img tag or .image just float left, and even no margin-left value to 2nd <p> tag. Well that's because we used float:left for .image and float:right for 2nd <p> tag so by default they both get aligned.
.box{
width:300px;
margin:auto;
position:relative;
}
.box > p:nth-child(2){
float:right;
width:180px;
margin:0px;
}
.image{
width:100px;
float:left;
}
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p>
<p>
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est.
</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
</div>
Solution 3:- No need of adding any <p> tag or other tags to style your text, but it's good practice if you add some default assigned tags to your text.
Just make changes in you HTML codes i.e. add your <img> in-between you text and then it works fine.
.box{
width:300px;
margin:auto;
position:relative;
}
.image{
width:100px;
float:left;
padding:10px 10px 0px 0px;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est.
</div>
margin-top (positive value) - When we assign margin-top positive value to an element it pushes that element from top and if it has some element below it than that too move bit down.
margin-top (negative value) - But When we assign margin-top negative value to an element, so at that point we are making that element to get into a field of an another element which itself has some properties already assigned i.e. pulling or forcing the below to the top.
This is what the issue in your question too, either you make changes in you HTML code i.e. <img> in-between text or add <p> tag and work.

Answer 2

.Block {
width: 300px;
margin: auto;
}
.Image {
width: 100px;
height:100px;
float:left;
margin-right: 1em;
}
<div class="Block">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
<br><br>
Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" /> Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper.
</div>