How to Float Image Inside of Div

Keeping an floated image inside the div with CSS

The more traditional way (other than clearing) is to set the overflow property of the containing div to hidden.

<div style="border-bottom: solid 1px silver; overflow: hidden;">
      <img src="photo3.jpg" style="float: left">
      <div>Some text about the photo3</div>
</div>

Sometimes, IE6 does not honor the setting and you have to resort to the cLFlaVA hack.

Image with float:right inside div with float:left

here's the answer: http://jsbin.com/iCowUPo/1/edit

Screen Capture:

Sample Image

HTML:

<div class="main">
    <div class="left">
      <img src="http://placekitten.com/200/200" />
    </div>
    <div class="right">
    </div>
    <div style="clear:both;"></div>
  </div>

CSS:

.main{
  background-color:#eee;
  width:500px;
  height:300px;
  overflow:auto;
}

.left{
  width:300px;
  float:left;
  height:300px;
  background-color:#aaa;
  overflow:auto;
}

.left img{
  float:right;
}

.right{
  width:200px;
  float:right;
  height:300px;
  background-color:#bbb;
}

Concept:

The trick is that if you float:right your image, you need to clear that float too. I did that by applying overflow:auto; to my left div which makes perfect sense.

Why cant center an image inside a 'div' with 'float' right or left?

You can use display: flex for this.

Change your display: table-cell to display: flex.

Then change text-align:center; and vertical-align:middle; to align-items: center; and justify-content: center; to center it vertically and horizontally.

Edit: Then I have also added a max-width of 150px to the image, to stop it expanding out of the container when the image is bigger than it. Props to @Hkidd for pointing out that this happens.

.con {  width: 300px;  height: 200px;  background: #996600;}.box {  position: relative;  width: 150px;  height: 150px;  background-color: #333333;  display: flex;  align-items: center;  justify-content: center;  float: right;}img {  max-width: 150px;}

<div class="con">  <div class="box">    <img src="http://placehold.it/200x100">  </div></div>

How to float image inside of div

I'll try to explain the "right" way to use float so that you can see why your way didn't work.

In your post, you try to apply float: left to the <div> surrounding your image, but that technique only works when the element you are floating is above all the elements you want to wrap around it. That "may" solve your problem, but that technique has it's pitfalls if you're trying to use it to create two distinct columns - if the text on the right is taller than the floated element, the text on the right will wrap below it. So then you have to add another container around your non-floated elements to ensure that it won't wrap. This solves your problem, but doesn't really help if you can't even edit your markup!

I'd argue that the technique I've posted below works better, and solves your problem: http://jsfiddle.net/Wexcode/AQQwX/

.view-content { 
    position: relative;
    min-height: 180px;
    padding: 0 0 0 180px; }
.views-row { padding: 20px 0 0 20px; }
.views-field-field-headshot {
    position: absolute;
    top: 0;
    left: 0; }

Floating a div with image results in extra space

Your images width (caused by its class .class-0-569) is 33%. But that's of its container / parent element, i.e. the floated .class-0-568 element.

Apply the 33% width to the image's parent (.class-0-568) and 100% width to the image itself:

.class-0-568 {
  float: left;
  width: 33%;
}

.class-0-569 {
  padding-right: 2%;
  width: 100%;
  height: auto;
}

.class-0-570 {
  line-height: 1.2em;
  margin-top: 0.2816004em;
}

<div class="class-0-568" id="id-0-553">
  <img alt="Sample Image" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>

How to float:left a container with an image having a relative width?

Tough problem. I had to read the spec to help you out and here is my result.

It's impossible to solve the problem with the given constraints since it all depends on the width of the image (also called "replaced element")

Why?

Let's read the spec http://www.w3.org/TR/CSS2/visudet.html#float-width

If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

Lets do the "math" for your case

Preferred minimum width = 1000px (real width of the image)
Available width = assume 1990 (roughly page width)
Preferred width = 1000px (real width of the image)

min(max(1000, 1990), 1000) = 1000

As a proof http://jsfiddle.net/xnt27crz/5/ with 200px image

Summary

In your case the floated div will get the width equal to the real width of the image.

How to float an image within a dynamic div to the bottom right hand corner of the div?

Simplest solution is to create a space in the right side of the parent and give the parent position:relative. Than use position:absolute; bottom: 0; and right: 0 (or even a negative value to get the child out of the background area of the parent).

Here's a basic example:

.parent {  background-color: #eee;  margin: 1rem 4rem 1rem .5rem;  position: relative;  min-height: 4rem;  padding: 1rem;  box-sizing: border-box;  border-radius: 1rem 1rem 0;}.icon {  width: 3rem;  height: 3rem;  position: absolute;  background-color: #999;  border-radius: 1.5rem;  bottom: 0;  right: -3.5rem;}

/* rest is just adding some style, you don't need it. couldn't help it :) */
body {  background-color: #f9f9f9;}.icon {  background-color: white;  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 1px 0 rgba(0,0,0,.07), 0 2px 1px -1px rgba(0,0,0,.06);  transition: box-shadow .3s cubic-bezier(.4,0,.2,1), bottom .3s cubic-bezier(.4,0,.2,1);}
.parent:hover {  background-color: #e9e9e9;}.parent:hover .icon {  bottom: .2rem;  box-shadow: 0 3px 5px -1px rgba(0,0,0,.1), 0 6px 10px 0 rgba(0,0,0,.07), 0 1px 18px 0 rgba(0,0,0,.06);}

<div class="parent">  <div class="icon"></div>  Lorem ipsum dolor sit amet.</div><div class="parent">  <div class="icon"></div>  LoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit ut aliquam purus sit amet. Nisl nisi scelerisque eu ultrices. Elementum integer enim neque volutpat ac tincidunt vitae semper. Vestibulum morbi blandit cursus risus at ultrices mi. Ut diam quam nulla porttitor massa id neque. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Nisl purus in mollis nunc sed id semper risus. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Lorem ipsum dolor sit amet. Cursus metus aliquam eleifend mi. Dictumst quisque sagittis purus sit. Vel pharetra vel turpis nunc eget lorem dolor sed.</div><div class="parent">  <div class="icon"></div>  Lorem ipsum dolor sit amet.</div><div class="parent">  <div class="icon"></div>  Nisl purus in mollis nunc sed id semper risus. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Lorem ipsum dolor sit amet. Cursus metus aliquam eleifend mi. Dictumst quisque sagittis purus sit. Vel pharetra vel turpis nunc eget lorem dolor sed.</div><div class="parent">  <div class="icon"></div>  Volutpat lacus laoreet non curabitur gravida. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Pellentesque nec nam aliquam sem. Pellentesque diam volutpat commodo sed egestas egestas fringilla. At elementum eu facilisis sed odio. Eu tincidunt tortor aliquam nulla facilisi. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Eget egestas purus viverra accumsan in. Odio ut sem nulla pharetra diam sit amet nisl suscipit. Suscipit tellus mauris a diam maecenas sed enim ut sem. Dictum fusce ut placerat orci nulla pellentesque dignissim. Viverra nam libero justo laoreet sit amet cursus sit. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Rhoncus est pellentesque elit ullamcorper dignissim cras. Ut etiam sit amet nisl purus in mollis nunc sed. Gravida cum sociis natoque penatibus et magnis dis. Amet venenatis urna cursus eget nunc scelerisque viverra.</div>

Floating divs around and under an image

I got it working in your fiddle:

http://jsfiddle.net/BcjzK/4/

Because of the way div layouts work, its always going to start the green div below the red one if it comes after the red one in the HTML code unless you put it in a parent container that encapsules the entire left side.

As a fix I made another container div that would hold both the img and the green div and then floated that container left.

HTML:

<div class="container">
<div class="imgContainer">
    <img src="http://hazelden.ca/sample.png" alt="Some Image" width="320" height="auto" />
    <div class="extra-content">
        Text
    </div>
</div>
<div class="content">
...

CSS:

.container {
width:700px;
border:solid 1px gray;

}

.imgContainer{

 float: left;

}
.content {
 width:460px;
 border:solid 1px red;
 margin-right:0px;
 margin-left:auto;

}
.extra-content {
 width:230px;
 border:solid 1px green;
}
img {

 border:solid 1px blue;
}
blockquote {
 border:solid 1px gray;
 width:30%;
 float:right;
}

EDIT:

I noticed that the imgContainer box forces your content text to change position slightly to accommodate it's presence. if you want the content text to lay out precisely the same as before use this:

.imgContainer{  
 float: left;
 height: 450px;
 overflow: visible;    
}

http://jsfiddle.net/BcjzK/5/

You can even get the content text under the pic as close as it is on the side by changing the height property of imgContainer to 430px.

http://jsfiddle.net/BcjzK/6/

Hope this helps!