CODEWITHSUNDEEP
htmlcsshtml-lists
at.
at.

Reputation: 52530

Making an image float to the left of an HTML list

Is it possible to float an image to the left of an HTML list. Well it seems possible, but can I make it look nice with the bullets not on top of the image? I need the bullets to line up with the text above and below the list.

Here's a jsfiddle with a heading and list underneath:

<img src="http://images.ucode.com/facebook.png"/>
<h1>A heading</h1>
<ul style="float: left">
    <li>a point</li>
    <li>another point</li>
    <li>third item</li>
    <li>trying to</li>
    <li>get past</li>
    <li>floating graphic</li>
</ul>

I love how the list flows around the image. Works great except the bullets for the list items that are to the right of the image should be aligned with the left side of the header.

Upvotes: 3

Views: 7898

Answers (6)

herrfischer
herrfischer

Reputation: 1828

This works for me:

ul {
    overflow: auto;
}

Upvotes: 0

Euripides Georgantzos
Euripides Georgantzos

Reputation: 636

Another solution would be to add position relative to the list and then give a left: value(ie 20px). Just a minor addition to Mr Alien's great answer, adding a margin-right to the image will not only push the list but also text that might exist before or after it- the result might seem misaligned. Here's a fiddle with the relative position approach:

https://jsfiddle.net/egeo/zgf4un7d/1/

img {
    float: left;
}

ul li {
  position: relative;
  left: 20px;
}

Upvotes: 4

Mr. Alien
Mr. Alien

Reputation: 157334

By default, the list-style-position is set to outside so make it inside

ul {
    list-style-position: inside;
}

Demo

Though, there's a catch here, using inside is appropriate when dealing with single/multiple word list items which do not wrap, as the wrapped text will move below the bullet which you might not need, in that case, remove list-style-position: inside; and use margin on your img tag.

Upvotes: 2

Prasad
Prasad

Reputation: 1812

I have just added a wrapper to your ul which has float left

div.right {
float:left;
}

take a look

Upvotes: 0

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

@Mr. Alien answered well. Another thing is to add margin/margin-right to img;

http://jsfiddle.net/gQZ3F/10/

Upvotes: 0

user3327205
user3327205

Reputation: 11

A little padding to the right of the image should be ok?

img {
    float: left;
    padding-right:10px;
}

Upvotes: 1

Related Questions