Home/ Questions/Q 8663133
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T16:54:32+00:00

I have one container and I have float:left inside it’s child div. Problem is

  • 0

I have one container and I have float:left inside it’s child div. Problem is as soon as I apply float:left on child div my parent div’s background is completely lost.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <div style="background: #CCC; width:100%; position:relative;">
            <div style="float:left;">
                This is some text
            </div>
        </div>
    </body>
</html>

Can anybody tell me how do I fix this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    float elements do not have height unless you clear them below or give explicit height

    Try this,

    <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>

        <div style="background: #CCC; width:100%; height:50px;position:relative;">
            <div style="float:left;">
                This is some text
            </div>
        </div>
    </body>
</html>

    OR

     <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div style="background: #CCC; width:100%; position:relative;">
            <div style="float:left;">
                This is some text
            </div>
            <div style='clear:left'></div>
        </div>
        
    </body>
</html>

    OR use this hack of setting overflow of element.

     <!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div style="background: #CCC; width:100%; overflow:hidden;position:relative;">
            <div style="float:left;">
                This is some text
            </div> 
        </div>
        
    </body>
</html>
    • 0