www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: about positioning and float -property

  1. #1
    Join Date
    Feb 2003
    Posts
    10

    about positioning and float -property

    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?

  2. #2
    Join Date
    Feb 2003
    Posts
    10
    A little something to clarify what I'm trying to do here:


    +-------+This is
    | image |how it
    +-------+looks

    ^-- text elements start here

    +-------+....This is
    | image |....how it
    +-------+....should
    ....look

    should --^
    start here where
    the image ends
    Last edited by Arkki; 02-28-2003 at 03:16 PM.

  3. #3
    Join Date
    Feb 2003
    Posts
    8
    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
    Code:
             .title img {
    	float:left; 
    	}
    
             .title {
    	padding-left:  imgwidth + paddingLR + borderLR + marginLR px;
    	}
    
    
    with the html:
    
    <span class="title"> 
    
         <img src=".." />
    
    </span>
    Last edited by Wisbin; 02-28-2003 at 03:36 PM.

  4. #4
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    <img src="foo.jpg" style="float: left; margin-right:10px" />

  5. #5
    Join Date
    Feb 2003
    Posts
    10
    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 )
    Last edited by Arkki; 03-01-2003 at 06:15 AM.

  6. #6
    Join Date
    Feb 2003
    Posts
    8

    Talking try this

    put another container in it: div.text and set the margin-left to the width of the image.

    like this:
    Code:
    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!

  7. #7
    Join Date
    Feb 2003
    Posts
    10
    Yeah.. This again prevents the text from flowing under the image, but I guess that's the only way.

    Thanks.

  8. #8
    Join Date
    Nov 2002
    Posts
    984
    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.

  9. #9
    Join Date
    Feb 2003
    Posts
    10
    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.

  10. #10
    Join Date
    Nov 2002
    Posts
    984
    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.

    Last edited by Stefan; 03-01-2003 at 11:29 AM.

  11. #11
    Join Date
    Feb 2003
    Posts
    10
    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.

  12. #12
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Originally posted by Arkki
    Adding a doctype doesn't change the way they're rendered a bit.
    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.

  13. #13
    Join Date
    Feb 2003
    Posts
    10
    Yeah I know but it doesn't change it in this case.

  14. #14
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    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

  15. #15
    Join Date
    Feb 2003
    Posts
    10
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles