about positioning and float -property

@ArkkiFeb 28.2003

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.

Example:

<img src=”foo.jpg” style=”float: left;” />
<p style=”padding-left: 10px;”> paragraph </p>

Here the padding doesn’t do anything, because the p element
starts on the left side of the image.

Anyone had similar problems? Any thoughts on this?

to post a comment

CSS

16 Comments(s) _↴

@ArkkiauthorFeb 28.2003 — #A little something to clarify what I'm trying to do here:

[FONT=courier new]

+-------+This is

| image |how it

+-------+looks

^{^--} text elements start here

+-------+....This is

| image |....how it

+-------+....should

....look

should --^

start here where

the image ends

[/FONT]

@WisbinFeb 28.2003 — #Your explanation was elaborate enough,

..but we like to see the code as well, so we can see more of the context and you could possibly get better feedback than you asked for.

So please give a link to the page.html and/or style.css

thnx

..usually this should work

<i>
 </i>         .title img {
 float:left; 
 }
 
 <i>    </i>     .title {
 <i>	</i>padding-left:  imgwidth + paddingLR + borderLR + marginLR px;
 <i>	</i>}
 
 
 with the html:
 
 &lt;span class="title"&gt; 
 
 <i>    </i> &lt;img src=".." /&gt;
 
 &lt;/span&gt;

@nkaisareFeb 28.2003 — #<img src="foo.jpg" style="float: left; margin-right:10px" />

@ArkkiauthorFeb 28.2003 — #Right... I put up a couple of example pages.

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.

Thanks anyway for the replies. (how pessimistic ?)

@WisbinMar 01.2003 — #put another container in it: div.text and set the margin-left to the width of the image.

like this:

<i>
 </i>div.photo {
 padding: 5px;
 margin-right: 5px;
 border: 1px solid black;
 }
 
 div.text {
 padding: 5px;
 margin-left:150px;
 }
 
 div.footer {
 clear: both;
 padding: 5px;
 border-top: 1px solid black;
 }

If you put the <div class="text"> over the right-column NS will comply!

Good luck!

@ArkkiauthorMar 01.2003 — #Yeah.. This again prevents the text from flowing under the image, but I guess that's the only way.

Thanks.

@StefanMar 01.2003 — #Arkki, what is the reason for you to be using display:inline-block at all?

Floating an image automatically turns it into block-level anyway, so what's the point of using inline block?

BTW, inline-block is NOT available in CSS2, only in later still unfinished specs, so any use of it should be considered experimanetal and probably not used on a "real" site.

@ArkkiauthorMar 01.2003 — #I applied the inline-block rule to the p and h elements which are [U]not[/U] 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.

@StefanMar 01.2003 — #Ok, now I fugured out your problem.

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.

@ArkkiauthorMar 01.2003 — #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.

@nkaisareMar 01.2003 — #[i]Originally posted by Arkki [/i]

[B]Adding a doctype doesn't change the way they're rendered a bit.[/B][/QUOTE]
Adding a doctype DOES make a lot of difference. It toggles browsers (all browsers including IE, NS, opera etc) into buggy/compliant modes. Believe me, I have learnt it hard way.

@ArkkiauthorMar 01.2003 — #Yeah I know but it doesn't change it in [U]this[/U] case.

@Paul_O_BMar 01.2003 — #Hi,

This won't help you much, but it might help you to understand what's happening.

This is a quote from Eric Meyers book:

Quote:

"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. "

Endquote.

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.)

Paul

@ArkkiauthorMar 01.2003 — #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.

@StefanMar 01.2003 — #[i]Originally posted by Arkki [/i]

[B]

And as you can see I have "padding-left: 10px;" set on all p tags already, and that has "0 relevance" as well.

[/QUOTE]

Sorry, I just saw the initial broken HTML and didn't bother with testing the page with an added doctype.

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?

[/QUOTE]

A line box is not the same thing as the the P element it resides in, but an imaginery box wrapping everything on a line. Don't confuse the two.

Anyway, if you want more solutionsuggestions this would also work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css" title="Default" media="screen">

#floatbox {width:100px; float:left; height:100px; border:1px solid red; margin-right:10px;}

#textbox {border:1px solid blue; padding:10px;}

</style>

</head>

<body>

<div id="floatbox">test</div>

<div id="textbox">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>

<p>

<a href="http://validator.w3.org/check/referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" /></a>

</p>

</body>

</html>

@ArkkiauthorMar 02.2003 — #Ah. One step more towards profound understanding.

Also in #CSS _↴

Ive got a div...Rollover CSS/JS Fancybox on click opens on bottom of the page.

Success!

Help @Arkki spread the word by sharing this article on Twitter...

Tweet This

about positioning and float -property

16 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

about positioning and float -property

16 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

16 Comments(s) _↴

Also in #CSS _↴