Image floating troubles

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.

If you're trying to get the contentpane DIV to put the border around the image...then the contentpane needs to be tall enough to contain the image. Have you tried putting a
right after the image? Additionally, if that topmost contentpane's only purpose is to put a border around the image, why not apply the border directly to the image itself? — , Oct 16 '12 at 18:44
I want to help, what you ask ? and did you can give us demo in jsFiddle ? — yossi, Oct 16 '12 at 18:45
I tried what Leigh said earlier, didn't work. I'm just attempting to get the div to show the border around the image and text that the article may have in it. So it's not just the image that needs the border, it's the entirety of the element. — nolasaint, Oct 16 '12 at 18:46
I haven't looked at it carefully but Leigh is probably pretty spot on. Instead of doing
which is incorrect, try — Ballsacian1, Oct 16 '12 at 18:48
"it's not just the image that needs the border, it's the entirety of the element" Do you mean the `maincontentwrapper`? — j08691, Oct 16 '12 at 18:50
It looks like you want something like a blog-listing page, right? Some text, an accompanying image, and then below it, repeat the same? Have you tried adding a min-height to the contentpane div, and make the min-height about 20px taller than the image that's going to go in there (assuming that all the images are the same size)? — , Oct 16 '12 at 18:52

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

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!

edited May 23 '17 at 11:48

Community

1
1

answered Oct 16 '12 at 18:55

tuff

4,895
6
26
43

This works. However, I thought I had tried this before and it didn't work then. Maybe I'm just crazy. The only issue now is that, since I have a sidebar which is floating on the left of the page (it's totally independent from the `maincontentwrapper`, `clear: both` extends it to the bottom of the sidebar. Is it possible to clear relative to a parent element? **EDIT:** Nevermind, I figured a way around it .-. Thanks for your help! – nolasaint Oct 16 '12 at 19:00
Another of the clearfix methods I linked above may avoid this problem; however I find it easiest to use `position: absolute` on the sidebar rather than float it: http://jsbin.com/iduvof/3/edit – tuff Oct 16 '12 at 19:10
Figuring that out the hard way :P. I decided to rework the whole page (not the layout, just cleaning and clarifying code so it'll be much easier to see what's going on.) – nolasaint Oct 16 '12 at 19:47

Image floating troubles

1 Answers1