Question

I’m working on a little project for fun and ran into some trouble trying to get an image inside a <div> to float on the right side of said <div>. The problem is that it seems to ignore the container (the <div> it’s in) and act as if it were part of the parent wrapper. What I want to happen is for the containing element to adjust it’s height based on the image inside of it…I guess. Been toying with it but haven’t had any luck.

HTML:

<div class="maincontentwrapper">
    <!--First body article on page-->
    <div class="contentpane">
    <img src="images/welcomethumb_small.jpg" alt="" id="infoimg" />
            Filler text. This is the only thing that<br />
            seems to change the height of this div's<br />
            border.
</div>

    <!--Second body article on page-->  
<div class="contentpane">
    Text goes here.
</div>
</div>

CSS Code for all visible classes:

.maincontentwrapper {margin: 10px 333px 10px 10px;}
.contentpane {border: solid 2px red;
          margin-bottom: 10px;
              padding: 4px 4px 4px 4px;
      text-indent: 1em;}
/* Thumbnail for first article on home page.
   Margins set to push image to align ignoring the container's
   border width and padding width. */
#infoimg {float: right;
      width: 145px;
      height: 150px;
      margin: -6px -6px 4px 4px;}
/* End Main Content Styles */

EDIT: If you need a link to the website for clarification as to what the issue is I can certainly add it.

Answer 1

What I want to happen is for the containing element to adjust it’s height based on the image inside of it

You need to clear below the image, like this: http://jsbin.com/iduvof/1/edit

There are several ways to do this, which you can read more about here.

The method that I have used is to add an extra div which has the property clear: both. This is probably not best practice as it’s non-semantic markup, but it’s easy!