Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Location
    Rutland (county), UK
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Overflowing a floated element

    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
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Not sure if this is the best way to achieve it, but you could try this:

    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="phpwp.jpg" style="width:400px;height:100px;border:solid blue;position: relative; top: -20px" />
    </div>
    Works for me, I think I have done it how you wanted..

    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,

    LC.
    Last edited by LearningCoder; 11-27-2012 at 07:22 PM.

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Location
    Rutland (county), UK
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tnx LC
    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!


  •  

    Tags for this Thread

    Posting Permissions

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