2

why the div3 is not showing green color that i define??

<div style="width:100px;height:100px;background-color:#ffff00;float:left">
div1
</div>

<div style="width:100px;height:100px;background-color:#0000ff;float:left">
div2
</div>

<div style="width:100px;height:100px;background-color:#00ff33">
div3
</div>

why is this happening ? but it shows the green color when i apply attribute float="left" also working when i apply float="right" but when there is no float attribute in the div3 then the green color didn't show up why ?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Sarthak Sharma
  • 679
  • 2
  • 7
  • 17
  • You can use `display: inline-block`. Check this [fiddle](http://jsfiddle.net/gqPtN/). Dont know the exact reason – karthikr Aug 05 '13 at 18:14
  • 2
    Why is the current code not working though? I can't see a clear-cut reason for it. Does somebody have an explanation? (It is clearly to do with the `float` properties of the two elements above, and you could fix it using `clear: both` on the third element, but what exactly happens here?) – Pekka Aug 05 '13 at 18:14
  • 2
    If you use a proper HTML inspector (like firebug) you can see that it is hidden below the yellow div. @Adrift explains WHY it is there below. – AmazingDreams Aug 05 '13 at 18:16
  • 1
    i can fix it but the Q is what is going on here ? why this happened ? – Sarthak Sharma Aug 05 '13 at 18:18
  • It's because you aren't floating the last div, but you have a hardcoded height. The text you are seeing is actually overflow that the floating elements have pushed down. Example without height: http://jsfiddle.net/gqPtN/1/ – Wesley Murch Aug 05 '13 at 18:18

5 Answers5

4

Because floated elements are taken out of the normal flow (not entirely like absolutely positioned elements) - the third div in your HTML is actually sitting behind the first two floated divs, although the line box (div3) is sitting below them, as line-boxes are the only elements that floats respect. A line box is an element that belongs in the inline formatting context

From the 2.1 Spec

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.

http://jsfiddle.net/Adv2v/

Adrift
  • 58,167
  • 12
  • 92
  • 90
2

If you had some margins around your div1 and div2, you could see div3:

<h2>Why it breaks...</h2>
<div style="width:100px;height:100px;background-color:#ffff00;float:left;margin: 0 10px;">div1</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left;margin: 0 10px;">div2</div>
<div style="width:100px;height:100px;background-color:#00ff33;">div3</div>

<h2>How to fix it...</h2>
<div style="width:100px;height:100px;background-color:#ffff00;float:left;margin: 0 10px;">div1</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left;margin: 0 10px;">div2</div>
<div style="width:100px;height:100px;background-color:#00ff33;overflow: auto;">div3</div>

However, this is easily fixed using overflow: auto on div3.

See fiddle: http://jsfiddle.net/audetwebdesign/jv7YB/

Why You Are Seeing This Effect

Your div3 in in the flow, with a specified height and width of 100px, and a background color of green.

Without the floats, you would see a green square positioned to the top left of the viewport which is the parent element. Within the green square, the text (more accurately, line box containing the text) is positioned to the top left.

When you add the floats, the floats are positioned starting at the top left of the view port and are painted over any regular in-flow content.

However, the line box containing the div3 text is shortened to make room for the floats, but the inline box is pushed down since there is no room in the div3 container to contain the floats and the original text.

The background of the div3 container is separate from the line box containing the text, and is is not pushed down as one might expect.

When you apply overflow: auto to the div3 block, it creates a new block formatting context and the div3 block acts like a self-contained unit, so the green background encloses the content and any child elements.

References

For stacking order and how background colors are painted, see: http://www.w3.org/TR/CSS2/zindex.html#painting-order

For block formatting contexts: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

For more insight about why block formatting contexts are implemented as they are, see:
Why does CSS2.1 define overflow values other than "visible" to establish a new block formatting context? courtesy of BoltClock

Community
  • 1
  • 1
Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • 2
    For an in-depth look at the relationship between floats and BFCs, see http://stackoverflow.com/questions/9943503/why-does-css2-1-define-overflow-values-other-than-visible-to-establish-a-new-b – BoltClock Aug 06 '13 at 06:16
1

That's because float elements do not consume space, so your body is not height enough and your element will be invisible. If you add a lot of breaks after the second div, you'll see the div.

tobspr
  • 8,200
  • 5
  • 33
  • 46
0

The green background is there but it's behind your yellow DIV. Text and inline-elements wrap around floated elements so your "div3" text gets pushed down.

https://developer.mozilla.org/en-US/docs/Web/CSS/float

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
hungerstar
  • 21,206
  • 6
  • 50
  • 59
0

Alternative solutions are to give your non-floating div a left margin, the size of the sum of the widths of the floating ones. In this case, 200px. Of course this requires that you know exactly how wide those floating ones are.

JSFiddle

Or, put the floating ones inside the non-floating one and increase its width, in this case to 300px. But again, this requires you to know how wide the floating ones are.

JSFiddle

Mr Lister
  • 45,515
  • 15
  • 108
  • 150