float left and right

[alfonce]

Hi there,

I'm trying to place images withing text kinda like a magazine layout and I am using float left for images I want to hale on the left and float right for images on the right. See the following css.

.image_right {
padding-left: 10px;
padding-bottom: 1px;
padding-top: 2px;
float: right;
}

.image_left {
padding-right: 10px;
padding-bottom: 1px;
padding-top: 2px;
margin-right: 5px;
float: left;
}

This works fine for the right images but not for the left.

1. When there is a list - the method doesnt work and text either goes over the image, a dot occours before the image and it looks different in each browser - note that it is perfect when not a list.

example:
<ul>
<li><img src="../images/ebro_catfishing_boat.jpg" alt="Ebro Catfishing Boat" class="image_left" title="Ebro Catfishing Boat">Charter boat fishing. A fully customised charter boat that has been modified for locating, hooking and landing very large catfish. These charter boats are extremely stable 17 foot
California Skiffs fitted with 2005 50hp Honda 4 stroke outboard motors with electric start.</li>

How to deal with this?

thanks,

Alex.

[edited by: encyclo at 1:04 pm (utc) on Feb. 11, 2006]

[DrDoc]

First of all -- set

list-style-type

to

none

to get rid of the "dot".

Second, on your list items, set

overflow

to

auto

.

[coopersita]

You may also want to remove margin and padding from ul and li:

ul, li {padding: 0; margin:0;}