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!)
<div style="float:right;width:400px;height:200px;border:solid yellow"></div>
<!-- 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"/>
Not sure if this is the best way to achieve it, but you could try this:
If you want your test image to be sat 'on top' of the yellow bordered div instead, you can delete the
Hope it helps.
Best of luck.
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!
|All times are GMT +1. The time now is 12:53 PM.|
Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.