# How to align and float images in div on website

**URL:** <https://www.phphelp.com/t/how-to-align-and-float-images-in-div-on-website/33198>\
**Category:** HTML & CSS\
**Created:** [February 28, 2021, 9:33pm UTC](https://www.phphelp.com/t/how-to-align-and-float-images-in-div-on-website/33198 "2021-02-28T21:33:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adem](https://www.phphelp.com/letter_avatar_proxy/v4/letter/a/a4c791/32.png) [@Adem](https://www.phphelp.com/u/Adem)\
**Post date:** [February 28, 2021, 9:33pm UTC](https://www.phphelp.com/t/how-to-align-and-float-images-in-div-on-website/33198/1 "2021-02-28T21:33:16Z")

</div>

Hello,  
I am using Bootstrap 3 css

How can I do it horizontally with the picture on the right or left and the text in the opposite direction  
Div height should be adjusted automatically according to the height of the picture.

Picture falls outside the div box

```
<div class="well">Text text
        <img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" style="padding-left: 20px; padding-bottom: 20px;" align="right">
        </div>
        <br /><br />
        <div class="well">Text text
        <img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" style="padding-left: 20px; padding-bottom: 20px;" align="left">
        </div>
        <br /><br />
        <div class="well">Text text
        <img src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" style="padding-left: 20px; padding-bottom: 20px;" align="right">
        </div>

```

I want it to be like this

 ![aaaaaa](https://www.phphelp.com/uploads/default/original/2X/9/98505e7ccf13b9063d9517106afab74388b8c4e7.png)  
 ![6-600x119](https://www.phphelp.com/uploads/default/original/2X/5/596e5f905a7c3e59191f6d883a39a32cf68093e7.png)

 ![1-1-600x104](https://www.phphelp.com/uploads/default/original/2X/1/16b4e668718c9e3a4c64e0035d66463e0b18a1e8.png)

---

<div class="post-metadata">

**Author:** ![Adem](https://www.phphelp.com/letter_avatar_proxy/v4/letter/a/a4c791/32.png) [@Adem](https://www.phphelp.com/u/Adem)\
**Post date:** [March 1, 2021, 10:51am UTC](https://www.phphelp.com/t/how-to-align-and-float-images-in-div-on-website/33198/2 "2021-03-01T10:51:22Z")

</div>

I fixed the problem as below  
To give space to the edges of the picture  
padding? margin? should i use

```auto
<div class="well" style="overflow: auto;">Text text
        <img style="float: right;" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" style="padding-left: 20px; padding-bottom: 20px;" align="right">
        </div>
        <br /><br />
<div class="well" style="overflow: auto;">Text text
        <img style="float: left;" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" style="padding-left: 20px; padding-bottom: 20px;" align="left">
        </div>
        <br /><br />
<div class="well" style="overflow: auto;">Text text
        <img style="float: right;" src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" style="padding-left: 20px; padding-bottom: 20px;" align="right">
        </div>

```