Floated image to left of a ul is ignoring margin/padding

Question

I have a paragraph followed by an unordered list, with several list items. I also have an image floated to the left of that. The problem I am having is that the list item margin

Answer 1

li style="margin-left: 135px;" Worked best for me.

The overflow: auto; looked ok up front but wound up messing with other elements in my HTML.

Answer 2

You can give your list items an overflow property:

li {
    overflow: hidden;
}

That will cause the list item to sort of behave correctly: They will display as a square block, continuing where the image ends as well, they don´t flow nicely to the left. The next list item will.

Answer 3

Add this:

ul{ list-style-position: inside}

That's it!

Answer 4

Another option would be to shift the list to the right with relative positioning:

img+p+ul {
    position: relative;
    left: 1em;
    top: 0;
}

Answer 5

ul {
    overflow: auto;
}

I'll have the added advantage of not having the list items wrapping around the image.

Answer 6

If you don't bother about adding javascript, here is a jQuery script that will add a margin to the ul that overlaps the image so all the list items remain aligned, and then assigns a negative margin to the li's that doesn't overlap.

$(function(){
    //Define a context so we only move lists inside a specified parent
    var context = $("#test_div");    

    //Build a list of images position a size
    var imgRects = [];
    var imgs = $("img.left", context);
    imgs.each(function(i){
        var pos = $(this).position();
        pos.right = pos.left + $(this).outerWidth(true);
        pos.bottom = pos.top + $(this).outerHeight(true);
        imgRects.push(pos);        
    });

    //Process each li to see if it is at the same height of an image        
    var lis = $("li", context);
    lis.each(function(i){
        var li = $(this);
        if(li.parent().css('marginLeft') != "0px"){
            return; //Already moved
        }
        var top = li.position().top;
        for(var j in imgRects){
            var rect = imgRects[j];
            if(top > rect.top && top < rect.bottom){
                li.parent().css('marginLeft', rect.right);
                return;
            } else if(li.parent().css('marginLeft') != "0px"){
                li.css('marginLeft', -1 * rect.right);
            }
        }
    });
});

I've tested with your demo page and jQuery 1.3.2 and it works on FF3.5 and IE8 because the image is on top of the document. If the image appears in the middle of a ul, the firsts li's will remain padded. If you need to correct this issue leave a comment and will try to update the script.