I'm having trouble to float an image to the left, and let text elements after that flow around it on the right, without the text elements starting at the left edge of the parent element (thus under the image)?
The text does render to the right side of the image but the elements are relative to the parent elements' left edge. This makes it impossible to use margin and padding properties to position the text elements relative to the image.
"display: inline-block;" -rule helps on IE but doesn't do a thing in NS7. Another thing I tried was to wrap the text elements to a container div, but this prevents the text from flowing under the image.
This page has the "display: inline-block;" rule set on all
h* and p tags, http://users.utu.fi/mialhe/test1.html
and this one has them commented out: http://users.utu.fi/mialhe/test2.html
I also set borders on the elements so you can see how they render. Note that the test1.html works the way I want to on IE but not on NS7. Also note that there are different padding values for h* and p tags so it's not enough to put a margin on the image.
What I'm looking for is a display property or something that would do the same as the inline-block display rule but on all modern browsers.
I applied the inline-block rule to the p and h elements which are not floated. The image is the only floated thing here. Check the example urls given earlier (i'll put them back), and you'll see what I mean. I tried everything I could think of, but Inline-block was the only display rule that did what I wanted.
It depends on you not understanding how float works.
The text next to a float is positioned by increasing the margin.
Eg if you have a 100px image left floated, a <p> following will get it's margin set to 100px (if it's lower then this by default).
Thus you setting 10px margin makes 0 relevance.
However 10px padding should work.
The very likely reason it is NOT working for you is becuse your HTML is broken. For starters your testcases don't even include a doctype. This puts modern browsers into "mimic old bugs mode" instead of "standards compliant mode". This usually means your CSS goes to crap.
Thus start with adding eg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
at the very top of your pages and then correct errors that show up when you validate your pages at http://validator.w3.org
Once you do that your problems will llikely go away.
Heh, well... the documents are totally valid html 4.01 strict and valid css too. Adding a doctype doesn't change the way they're rendered a bit.
And as you can see I have "padding-left: 10px;" set on all p tags already, and that has "0 relevance" as well.
Did you look at how the borders of the p elements render in test2.html? If their margins are set to 100px, then why do the borders begin at the left, where the image begins? If an element has a margin of 100px, shouldn't the element's left edge be 100 pixels away from the left edge?
Anyway, don't bother to look into this anymore. I give in to the fact that there's no way to make this work the way I want it to.
This won't help you much, but it might help you to understand what's happening.
This is a quote from Eric Meyers book:
"Although floating elements are removed from the normal flow of the document, they do affect the layout of content within the document. This is effectively done by increasing the padding within any following elements on those lines which are next to a floating element. However this means that the backgrounds and borders of any element will extend "underneath" the floated element, and possibly past the other side of the floated element. This behaviour ensures that all element boxes will remain rectangular, but it can lead to unwanted effects. "
Therefore to effect any change on your paragraphs you will need to make padding that is at least as wide as your image before any effect will show. However this will also stop the text flowing under the image as it will now have padding that is wider than the image.
I think your only solution is to forget about text wrapping underneath the image (especially if you want borders around it) and set the headings and paragraphs to have a left margin of say 170px then they will keep the format that you have set with the padding. Then you can get rid of those inline blocks and have a page that works in all compliant browsers.
(If you want text (without borders) to flow to the side and underneath your image you will just have to do without the indentation on the headings.)
Thanks. I resorted to the solution by wisbin (wrapper div with a margin). It's good to know it can't be done, and thus be able to finally sleep my nights at peace
You saved me from a lot of nightmares with evil block elements floating around.