Home/ Questions/Q 3725260
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T06:56:34+00:00

Please help me to understand why the image – div of the following code

  • 0

Please help me to understand why the image–div of the following code flows out of the box–div.

<body>
    <div id="box" style="border: 2px solid green;">
            <div id="image" style="height: 200px; width: 200px; background: red; float: left;"></div>
            <div id="text" style="background: yellow;">This is some text</div>
    </div>
</body>

In other words, I expected the green border to fully enclose both inner divs and not only the yellow one.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When a children its floating the parent doesn’t wrap it. You can use two solutions for this:

    #box{
     overflow:hidden;
}

    Or

    #box{
     float:left;
}

    You can also use display:inline-block for the #box but that doesn’t work on IE6

    • 0