CODEWITHSUNDEEP
htmlcsshtml-lists
Code Junkie
Code Junkie

Reputation: 1372

How do I wrap an unordered list around an image?

In HTML, I'm trying to wrap a ul tag around an image. I need the right number of li tags to not overlap the image, no matter how tall or short they are. So far, I can get the content inside of the li tags to wrap around the image, but can't get the lis themselves to wrap around the image. Since each li tag has a bottom border, this isn't quite enough. You can see where I have it right now here:

http://jsfiddle.net/BBmER/

How do I wrap an unordered list around an image so that even the li tags don't overlap the image?

Upvotes: 1

Views: 8342

Answers (4)

Michael
Michael

Reputation: 12011

How about add overflow:hidden; to the LI tag:
http://jsfiddle.net/BBmER/153/

Upvotes: 0

aris
aris

Reputation: 21

Give the ul element enough padding from left or right so that it wont overlap your image. For example, if your image is floated left and has 300px width, then your ul element should be:

<ul style="padding-left:300px">

or:

<ul style="padding-left:320px">

if you want some space between them.

Upvotes: 2

Matti Virkkunen
Matti Virkkunen

Reputation: 65126

I modified your new fiddle a bit, is this what you're looking for?

http://jsfiddle.net/BBmER/21/

What I did was I

  1. Removed the float from the description and instead just gave it a left margin (removed the right margin from the label at the same time since it's no longer needed)
  2. Removed the clear trick from the lis because it was pushing the second li under the image and
  3. Added clear: left; on the li element just in case you have a long label.

It doesn't change the fact that the li elements overlap the image, but at least the label and description elements are laid out properly.

Upvotes: 1

j08691
j08691

Reputation: 207881

You can accomplish it with some margin and an opaque image. See an updated jsFiddle.

CSS:

body {
    font-family: arial, verdana, sans-serif;
    font-size:13px;
}

ul li {
    margin-bottom:15px;
    border-bottom:1px solid grey;
}

img {
    float: right;
    padding: 0 0 15px 15px;
    opacity: 1;
    background: #fff;
    margin: 0 0 10px 10;
}

Upvotes: 1

Related Questions