Overflowing a floated element

decomplexity · 11-27-2012, 06:52 PM

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 />

<div style="width:400px;height:100px;border:solid green"></div>

<img src="test.gif" style="width:400px;height:100px;border:solid blue"/>
</div>
</body>
</html>

LearningCoder · 11-27-2012, 07:19 PM

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.

decomplexity · 11-28-2012, 10:35 AM

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!