Left aligned image spilling over container div

  • Hi, I’m new to the WordPress system…just got it up and running on my system and have modified a theme to make it look like my site.
    However, I’m running into an issue that I’m hoping someone with a little more CSS knowledge can help me out with.
    My post structure looks like this:

    <div class=”post”>
    <div class=”front”>Header stuff</div>
    <div class=”entry”>Post text</div>
    </div>

    For the most part everything looks fine. However, I just tried putting a small image in one of my posts. I aligned it left so that the text would wrap around the image. In this particular case, my text was shorter than the image was tall. The result of this was my containing div — the entry and post (post has a border) sized only to my text and not the image. This caused the image to spill out of the containing <div>s and messed the layout of the following post.

    I was able to fix it by using a style of float: left and then ending my text with a <br style=”clear:left”>. But I’d rather not have to do this.

    Is there anything that I can do to the style of my post and/or entry classes to prevent this from happening?
    Thanks.

Viewing 9 replies - 1 through 9 (of 9 total)

  • Bit hard to say without seeing a “live” example. Do you have a live link somewhere to look at what’s happening?

    Thread Starter efindley

    (@efindley)

    Sure…my site is located at https://blog.creationsings.net

    I put it back to the standard image tag (<img align=”left”>)..but before I did that I noticed that my break with a style of clear:left only fixed it in firefox, not IE.

    Hmmm. First, I’d remove the hard coded “align=left”. You can position the image using css instead.

    Not sure why it overlaps like that though. I’ll have to have a play.

    Thread Starter efindley

    (@efindley)

    Okay…I’ll use css instead. The align=”left” tag was provided for me when I used WordPress’s insert image popup.

    I did try it once with an image style of “float:left” but that seemed to have the same issues.

    Thanks for your help so far.

    float basically take the element outside of the hierarchy, so yes, it’ll cause the overlap. Haven’t had a chance to sit and play with your image problem, will maybe be able to do that after work tonight

    Thread Starter efindley

    (@efindley)

    I think I stumbled upon my answer. My first change was to give my entry class an overflow:auto tag…that fixed the overlap in Firefox. But IE was still messed up. So then I just stumbled upon the second part of the solution…My post class didn’t have an explicit width declared. Once I gave it a width, it works fine in IE and Firefox as long as I’m positioning my image with a float:left style. I wouldn’t have thought the div would have to have a specific witdh given for things to work…Oh well. ??

    Thanks so much for your help.

    IE needs specific a dimension sometimes to slap it into behaving.

    It’s always good practice to define a width with a float. ??

    Practice and experience makes perfect ??

    “Practice and experience makes perfect :)”

    Until you run into IE….

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Left aligned image spilling over container div’ is closed to new replies.