Home/ Questions/Q 8598905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T01:16:09+00:00

The situation is: HTML: <div id=main> <div id=a></div> <div id=b>Some Text</div> </div> CSS: #a{

  • 0

The situation is:

HTML:

<div id="main">
    <div id="a"></div>
    <div id="b">Some Text</div>
</div>

CSS:

#a{
    float:left;
    width:800px;
    height:150px;
    background-color:#CCC;
}

#b{
    width:1000px;
    height:100px;
    background-color:#9CC;
}

The result:
enter image description here

Why doesn’t the text go behind div#a ? Why does “Some Text” behave as if div#a is still in the normal flow? How to force the text to act as expected (to go under div#a) ?

UPDATE:
When I mean under, I mean beneath on the Z axis, not on the Y. The div’s should stay in this position, the only part that needs moving is the text.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://www.w3.org/wiki/CSS/Properties/float

    • left
    The element generates a block box that is floated to the left.
    Content flows on the right side of the box, starting at the top.

    The content of #b is acting as it should. It floats to the right side of the floated element preceding it.

    Thus, if you want a ‘layered’ effect, use a CSS declaration that will provide it properly: position

    Note: to keep #a positioned to it’s parent, rather than <body>:

    #main { position:relative }
#a { position:absolute }
    • 0