Float left combined with bullets: problematic

[schedal]

Hello folks,

Hopefully this is really simple, I have an image with float:left assigned. Then some P tags afterwards that wrap around the image. This is all no-problem. But then if I have a ul list of bullets, they don’t respect the position of the image, and get rendered ontop of/underneath the image! If I then set the ul element to float:left, this works fine, only then any subsequent P tags get stuck to the right-side of the UL elements, instead of going to the next line…
:(

problem visible here:

http://www.fountain-city.com/beta/page/services

Click: "Information Architecture"

I’m lost as to why this is happening and no changes in firebug that I make seem to resolve it…
:D
Thanks for any help you can offer!!

[JaredAM]

That’s interesting. You can give your list a margin-left of 200px and a width of 100% and remove the float.

[Thom]

Hello Schedal,

It looks like it has something to do with how you position your image, and floating the image(and shadow images), ul elements.

I managed to get the paragraph under the ul element with a clear: both. Im not sure if it works good in IE, sometimes that browser can be a pain………

Code:

As needed on a project-by-project bassis. For some projects, we also break down each design/functional requirements by its cost estimate, so that a project’s scope can also be determined by what features are selected.

you can do it inline or just make a new line for it in your css file.

[schedal]

Thank you both for your replies, unfortunetly, neither of these solutions will work programmatically in all cases, because the bullets are sometimes beneath the image, sometimes to the right of it [depending on how much text comes before it] and the P tag cant get a "clear: both" unless all P tags get one, which would stop any of the P tags from wrapping around the image. The reason I can’t add this to just one P tag, is because all of the content is generated, and I can’t be sure if the text in one page is longer than the distance before the image is done, or shorter… having to decide this on a per-block bassis would be a work around, but a pain…

Isn’t there something I am missing? This just seems silly, do I need to wrap all of my P and UL tags in a DIV perhaps? And make the div float left? Hmm… maybe I’ll try that next…

Thanks to anyone else who may have some light-flashes!

Best,

Seb.

[schedal]

pfff, no wrapping it in a div didnt help either… I can get it all to wrap "left" but then the bullet pictures get stuck behind (!?!)* the image and the bullet text properly snugs to the side of the image…
:(

Am I just doing something CSS was never meant to do? This seems like such a basic thing, there must be some way to wrangle the UL tag into compliance…
:-(

*: that little blue dot under the image should be the bullet picture to the left of every LI

(crying)

[schedal]

also just tried, overflow:hidden on the parent element, which makes the entire right side look perfect, but it doesn’t wrap around the image anymore when I do this… still struggling…
:(

sniffsniff

[schedal]

YAAY! finally, the solution was to add

Code:

ul {
overflow:hidden;
}

to the actual UL tag,

phew!!!

[marybaum]

Thank you for having this discussion! Now I can run lists in posts next to an image. I do wish there were a way to have the items wrap back under the visual once they’ve cleared the bottom (not CSS clear – English clear) but I’ll take what I can get. At least this doesn’t make me look as if people’s machines got broken ina wayback machine from 1995.

Mary Baum, April 2012

[Brett1211]

Thanks Schedal! Worked perfectly in both FF, IE, and chrome

[simplypixie]

Thank you for this – it is something I have want to resolve before but could never find the answer so just left things. Now I have the solution and so simple I could kick myself.

[djdaniel150]

Why are you using “float: left;” anyway. If you used absolute positioning then you wouldn’t need to float anything ever. “float: left;” or “margin-top: 5px;”, etc, is like saying, please move this element a little to the left, or a little towards the top, somewhere on the screen. This no longer makes sense when you consider the types of devices that are used to access the internet today. Positioning elements with fixed pixel values, or “float somewhere, but we aren’t sure exactly where”, is pointless. Not all devices have the same resolution, or pixel size for that matter.

[Paulie_D]

Oh, FFS

@djdaniel150

Will you please get off this ‘absolute positioning is the solution for everything’ kick…it just ISN’T.

In fact, it’s probably the last solution I would use…after tables. :)

[Watson90]

Hahaha @Paulie_D.

It seems that @djdaniel150 has been set out to make our forum comments turn into angry comments with his absolute positioning.

When I think of a load absolutely positioned elements, I just think of Dreamweaver wizards that seem to love putting that particular property into every single div.

[Author]

Posts