Image extending beyond content

[Ian G]

I’ve got a problem that I am sure has an easy fix, but I can’t remember where I saw the solution. I thought I remember seeing Chris C. fixing a problem like this in one of his screencasts but I haven’t found the right one.

The problem I’m having is I have content wrapped in a in a p tag with an image floated left at the very beginning. The size of the content area is being determined by the text, but the image is spilling over the edge. How should I go about getting the content area to expand to include the image?

You can see the problem in the blog section at the bottom of this page here: ecoevolution.org

[jamygolden]

Find this in your HTML:

And replace it with:

[Ian G]

My CMS controls the names of my divs, ids and their classes, so I tried instead to target the specific block’s “node-inner” div based on your suggestion and cleared the floats but it didn’t seem to work at the node-inner level. Node is the overall content type and node-inner is a subset, so I think I got the right level of specificity with

#block-views-Mainpage_Blog_block-block_1 .node-inner{

clear: both;

background: white;

}

(I added background: white just to make sure the changes were trackable)

I guess I need a straight CSS solution based on the div structure I’ve got now…

[Ian G]

Nice, that did the trick, I knew I was forgetting something. I was trying all sorts of padding, margin and display foolishness, but I knew that I was off base.

Thanks Virtual and jamy!

[Author]

Posts