#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2012
    Posts
    5
    Rep Power
    0

    Overflowing floated elements


    DAK what is supposed to happen when:
    a. a <div> (or other block element) is floated right in some containing block
    b. an unfloated <div> or other block in the text which follows the floated <div> is too wide to fit alongside the floated <div> (but is not wider than the containing block)?

    In the example below, the <div> following the ‘blah’ text stays with text and overflows the floated <div>, whereas the <img> stops at the base of the floated <div> and does not try to rise further (and hence overlap it).
    The <div> following the blah text can be made to stay below the floated <div> only by using display: “inline-block”. I realize that <img> is a replaced element but can’t see why it should behave differently from the awkwardly-behaving <div> or why the latter <div> should overflow the floated <div> and not stay below it when it doesn’t ‘fit’.
    (If you have a suitable test.gif, please try it for yourself!)

    <html>
    <head></head>
    <body>
    <div style="width:600px">
    <div style="float:right;width:400px;height:200px;border:solid yellow"></div>
    blah<br />
    blah<br />
    blah<br />
    blah<br />
    <!-- the following <div> sticks to the 'blah' text and overflows the floated div -->
    <div style="width:400px;height:100px;border:solid green"></div>
    <!-- but the following img stops at the base of the floated div and does not overlap it-->
    <img src="test.gif" style="width:400px;height:100px;border:solid blue"/>
    </div>
    </body>
    </html>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    300
    Rep Power
    9
    Works for me, I think I have done it how you wanted..

    Code:
    <div style="width:600px;">
    	<div style="width:400px;height:200px;border:solid yellow; position: relative;float:right; z-index: 1;"></div>
    	blah<br />
    	blah<br />
    	blah<br />
    	blah<br />
    <!-- the following <div> sticks to the 'blah' text and overflows the floated div -->
    <div style="width:400px;height:100px;border:solid green"></div>
    <!-- but the following img stops at the base of the floated div and does not overlap it-->
    <img src="test.gif" style="width:400px;height:100px;border:solid blue;position: relative; top: -20px" />
    </div>
    If you want your test image to be sat 'on top' of the yellow bordered div instead, you can delete the position: relative and z-index: 1 from the yellow bordered div.

    Hope it helps.
    Best of luck.

    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2012
    Posts
    5
    Rep Power
    0
    Tnx Nanomech.
    I guess I am trying to find out what the "official" behaviour is supposed to be. Having scoured the W3C documentation and Eric Mayer's CSS 'bible', I am none the wiser; I must be looking the wrong place! There is a shed-load of material about the rules for how floated elements float and about how floated elements behave when the containing block is too small, but there is (apparently...) a shortage of rules for how the non-floated stuff behaves in the neighbourhood of a floated element if the non-floated stuff won't fit alongside the floated element but will fit the containing block width-wise.
    I thought it must be a CSS overflow property, but overflow appears only to handle the situation when an element's content is too big for the element's size.
    The answer must be obvious and I am starting to feel very stupid!
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Floated elements only affect the positioning of inline content and other floated elements, unless you use the "clear", "overflow", or "display" properties to change how block elements interact with them.

    Originally the float property was intended just as a straight CSS equivalent for giving an <img> the now obsolete align="left" or align="right". However, because floats are fairly flexible (more so than absolute and relative positioning) and good cross-browser support for display:table-cell and display:inline-block took many years to become available (the latter is newer and wasn't included in the CSS2.0 specs), floats became very popular for laying out pages.

    See also: Making Elements Contain Floated Children

    I thought it must be a CSS overflow property, but overflow appears only to handle the situation when an element's content is too big for the element's size.
    If you only read the specs page that specifically covers the "overflow" property, yes, but that property actually does more than that. Read the Block formatting contexts section of the Visual formatting model page.

    The answer must be obvious and I am starting to feel very stupid!
    Don't feel bad. The answer is not at all obvious. You seem to be giving much more thought to the many facets of how floats work than most people do.

    P.S. Be sure to use a doctype in all of your HTML pages. Dealing with "quirks mode" is best avoided.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2012
    Posts
    5
    Rep Power
    0
    Of course!! – many thanks Kravvitz. Your quote ‘Floated elements only affect the positioning of inline content and other floated elements…” and the link Block formatting contexts section of the Visual formatting model page together say it all. I have been building pages with floated elements for years and never really thought in detail about the non-floated material in the same container – until now when something doesn’t behave as expected .

IMN logo majestic logo threadwatch logo seochat tools logo