CODEWITHSUNDEEP
htmlcssimage
luigivampa
luigivampa

Reputation: 397

Align image to right of text in div

I'm sure it's an easy question but I can't figure it out. I have this code basically

<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>

I want the image to align to the right of the text within the div. Everything I've tried so far takes the image out of the normal page flow making the div not respect the height of the image. I can't just explicitly state the height of the div because the image inside is dynamic and only of set width.

Here's what the page looks like.

How do I align the image to the right of the div and still have the div respect the height of the image.

Upvotes: 2

Views: 2070

Answers (3)

Arman Ozak
Arman Ozak

Reputation: 2344

It is because of the float on the image. In order to fix this, you may use a method called clearfix on the container element: div.infobox

.infoBox:after {
  content: "";
  display: table;
  clear: both;
}

Fiddle here.

Upvotes: 2

Gene R
Gene R

Reputation: 3744

Basically your div must have overflow:hidden, look example:

<div style="overflow:hidden">
    <img style="float:right; width:100px; height:100px"/>
    <div>text text text text text text text text</div>
</div>
<div style="overflow:hidden">
    <img style="float:right; width:100px; height:100px"/>
    <div>text text text text text text text text</div>
</div>

Alternatively you can put <div style="clear:both"></div> after each div

Upvotes: 4

RuvenS
RuvenS

Reputation: 129

In css set the overflow of the div that has to respect the height of the image to auto.

div {
  overflow: auto;
}

Upvotes: 2

Related Questions