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/padding is being overlapped by that image.

I want the bullets that are next to the image to indent like it should.

Here is a test I wrote up for debugging, where you can see my issue in action.

All of this is inside of a CMS, so the image dimensions are variable, as well as the paragraphs and possible lists in the text.

Any solutions?

(See my first comment for pictures.)

Basically, I want I want http://tinyurl.com/ku7cck to look like http://tinyurl.com/lph2hj — caitlin, Jul 23 '09 at 23:38

score 21 · Answer 1 · edited Nov 30 '11 at 16:09

21

ul {
    overflow: auto;
}

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

edited Nov 30 '11 at 16:09

CoolBeans

20,654
10
86
101

answered Feb 08 '11 at 19:13

user608664

211
2
3

score 12 · Answer 2 · answered Jul 23 '09 at 23:40

12

Add this:

ul{ list-style-position: inside}

That's it!

answered Jul 23 '09 at 23:40

I don't want to do that because then the other lines don't left align with the first letter of the first line. – caitlin Jul 23 '09 at 23:45
It appears to work fine here: http://jquery.nodnod.net/cases/580/run Have you used a CSS reset? – Jul 23 '09 at 23:50
He is using your solution. If you go into the code and make one of those li's text a lot longer, you can see. (Or just look at the CSS). – caitlin Jul 24 '09 at 00:00
Oops, I missed your HTML demo, I just saw the screenshots. I'm guessing that the problem is due to the fact that you don't have margin and padding declared. Back in the day, before CSS resets were common, I remember an idiom where you always defined left margin and padding for lists to ensure consistent bullet placement. I thought it was from an ALA article, but a quick search yielded nothing. Anyway, I suggest using some form of CSS reset, whether it's Eric Meyer's fantastic one (http://meyerweb.com/eric/tools/css/reset) or a simple *{margin:0;padding:0} – Jul 24 '09 at 00:00
This is an extracted piece from a full dev website where I am using resets. But, I did the *{margin:0;padding:0} and it did not help. – caitlin Jul 24 '09 at 00:46
How have I never heard of this in 25 years of web development? This fixed my problem. Thanks. – PRMan Jun 17 '22 at 22:27

score 1 · Answer 3 · answered Oct 08 '11 at 18:43

1

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

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

answered Oct 08 '11 at 18:43

outis

75,655
22
151
221

score 1 · Answer 4 · edited Jan 04 '12 at 23:58

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.

edited Jan 04 '12 at 23:58

Marvin Pinto

30,138
7
37
54

answered Jan 04 '12 at 23:33

mike

11
1

score 0 · Answer 5 · answered Jul 24 '09 at 00:13

0

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.

answered Jul 24 '09 at 00:13

jeroen

91,079
21
114
132

This does the same thing as "display: block" on the list item does. My bullets disappear. What is this supposed to do? – caitlin Jul 24 '09 at 00:44

Serxipc · Answer 6 · 2009-07-30T11:14:59.220

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.

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

6 Answers6

Linked