CSS - How to Align Image Left Bottom to the Text Block

CSS - How to align image left bottom to the text block?

That is not possible in HTML/CSS.

Absolute positioning allows placement like that, but you should ensure other content not clashing with it - no text flowing around.

Float mechanism gives you flowing around, but only allows placing float on the horizontal level of its "anchor" - no positioning but left/right..

How do I make a text align with the bottom left edge of an image

Your question isn't 100% clear. But to have the text start below the image, just erase the float: left; from the style attribute of the img tag.

EDIT after comment/clarification:

Add clear: left to the paragraph which you want to move below the image:

<p style="clear:left;"><b>Education:</b></p>

(and remove that margin-left from it)

How to align image next to block of text?

use div tag to wrap the img tag and put that above #pformat and apply style float:left

 <div id='coupons'>
   <a id="coupons" name='coupons'>
     <div style="float:left">   
      <img src="https://preview.ibb.co/jBYUxv/coupon1.png" id="i1" height="300px" width="600px">
     </div>      
    <div id='pformat'>
     <p>Here is a coupon just for you! Simply open the QR code and show it to the cashier so he/she can scan it! 
     </p>
    </div>

      </a>
    </div>

Align text on top, right, bottom and left of image?

You should add wrapper around Your image (for now it can be body), ad give it position: relative; Then modify .right class:

.right {
    display: inline-block;
    background-color: #F00;
    transform: rotate(90deg) translate(0, -50%);
    position: absolute;
    right: 0px;
    top: 50%;
}

updated fiddle

Align a div bottom left of an image with CSS

It would be better if you keep image and price in same div and give position as relative. I have added a div with class name as .container-div and updated css.

<div class="container-div">

        <img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/hotel-interior-room0416.jpg?itok=5gENxAK1" class="img-fluid rounded-top" style="width: 100%">
        <div class="price">229 $</div>
    </div>

In your csss file

container-div{
  position: relative;
}

.price {
    position: absolute;
    bottom:5px;
    right:0;
    background: #e74c3c;
    padding: 10px 15px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

I have updated your fiddle here

Float image left, float text right and align at bottom?

You can easily achieve this using inline-block using CSS. Just wrap everything inside one parent element.

.container-element {
  /* some fixed width */
  width:1000px;
}

.image-element,
.text-element {
  display:inline-block;
  vertical-align:bottom;
}

.image-element {
  width:600px;
}

.text-element {
  text-align:right;
  width:400px;
}

.nav-element {
  display:block;
  text-align:center;
}

And your HTML:

<div class="container-element">
  <div class="image-element">
    <img src="..." />
  </div>
  <div class="text-element">
    ...
  </div>
  <div class="nav-element">
    ...
  </div>
</div>

CSS: Align image right bottom of a div filled with text

you need a couple of things to fix this.

1) add padding-right to the section so it does not overlap with the image.

#section {
    position: relative;
    padding-right:<at least image width so the text doesn't overlap>
}

2) when you add a div and float in it, the float remove the image from the flow of the document so you need to add another internal div with the same height or make the height of the div the same height as your image or just add a floater div..

<div id="image">
   <img src="example.jpg" alt="image"/>
   </div>
   <div style="clear:both"></div>
</div>

Here is a working solution: http://jsfiddle.net/zV3wm/

---

Related Topics