1

We learned that absolute, fixed positioning and float properties, get the elements out of the normal flow.

So Well, take a look at this example: http://jsfiddle.net/WKQgL/1/

<div class="pink float"></div>
<div class="blue float"></div>
<div class="green"></div>
<div class="orange"></div>

The two first boxed are floated left and out of normal flow, so the second two boxes fill their space, Therefore the Green box goes under the Red.

But, how about this one? http://jsfiddle.net/WKQgL/24/

<div class="pink float"></div>
<div class="blue float"></div>
<div class="yellow">Well, why this text is out of the DIV?</div>
<div class="green"></div>
<div class="orange"></div>

We see that the text doesn't go beneath the boxes and take place in the bottom of them, so why?

In another example: There is a paragraph and a floated image:

<img src="example.jpg" style="float:right">
<p>This is a long paragraph surrounding the image</p>

In the result we see a floated image in the right, that the paragraph surrounded it. Compare that when we use absolute for the image, then the texts go under the image. We said that absolute and float take the element out of the normal flow, so what's the difference?

Community
  • 1
  • 1
Farzad Bayan
  • 251
  • 2
  • 4
  • 13
  • looks like the difference in your example is that the p is missing clear: both, or clear: left – Stefan Dec 09 '13 at 21:06
  • I'm not trying to push the paragraph to the bottom of Red DIV. I'm just wondered why it doesn't go under it like those non-floated ones. – Farzad Bayan Dec 09 '13 at 21:20

5 Answers5

1

The paragraph is block-level, so it takes the available remaining width. Therefore the non-floated blocks are forced to wrap below the floated elements.

isherwood
  • 58,414
  • 16
  • 114
  • 157
  • Now I changed the p to DIV and the result is confusing yet, the text take place in the bottom of floated boxes, not under them. – Farzad Bayan Dec 09 '13 at 21:34
1

The second example follows from W3C - Floats

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

This is why the yellow block flows below the pink block.

Normally the text would flow at the side of the floats. In this case though, the line boxes are restricted to the width of the containing yellow block and they are shortened to make room for the float. The shortening results in zero width line boxes and now follows

If a shortened line box is too small to contain any content, then the line box is shifted downward (and its width recomputed) until either some content fits or there are no more floats present.

This is the reason for the text (the line boxes) to behave different than its containing yellow block.

Your third example shows the special property of float, as opposed to absolute positioning. With float, the line boxes are shortened. With absolute, this doesn't happen. I have created this JSFiddle to show the difference. Since the imgs are transparent, you can see the p element (the dotted line) below the img element

<h1>float: right</h1>
<img class="float" src="http://lorempixel.com/200/200"/>
<p>Lorem ipsum ...</p>
<h1 class="clear">position: absolute</h1>
<img class="absolute" src="http://lorempixel.com/200/200"/>
<p>Lorem ipsum ...</p>

img {
    opacity: 0.5;
}
img.float {
    float: right;
}
p {
    border: 1px dotted black;
}
.clear {
    clear: both;
}
img.absolute {
    position: absolute;
    right: 8px;
}
Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198
0

The background takes only the space of the element(and starts from the top let corner), while in the p you have text, which fills the rest of the line(because it doesnt have a fixed width).

n1kkou
  • 3,096
  • 2
  • 21
  • 32
0

You have defined width's on the block class. If you add p{width: 200px;} the text block will behave as expected.

Rob
  • 152
  • 9
  • How about this one? http://jsfiddle.net/WKQgL/8/ I gave it a fixed width & height, and it's not behaving like this non-floated boxed. – Farzad Bayan Dec 09 '13 at 21:13
  • Add display: inline-block; – Rob Dec 09 '13 at 21:14
  • by adding inline-block, it will go just after the first Red box and it's not what I'm trying to achieve. I just want to push the paragraph under the red box. – Farzad Bayan Dec 09 '13 at 21:17
  • No. See this one: http://jsfiddle.net/WKQgL/24/ I put the text in the DIV, and gave it a yellow bg. Why the text is out of it? – Farzad Bayan Dec 09 '13 at 21:29
0

The paragraph element is going underneath the floated DIVs like the green div was (notice the green div was pushed down a bit), but the text is not. I believe this is normal behavior for text to wrap around block level elements it's not contained within.

Replace the <p> with <div> and you get the same behavior: http://jsfiddle.net/WKQgL/25/

user3075664
  • 36
  • 4