Home/ Questions/Q 9013155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T03:11:22+00:00

I have a simple page that I’m creating. When I create a child div

  • 0

I have a simple page that I’m creating. When I create a child div inside a parent div, it inherits the background, but when I try to float the child div to the right, it loses the inherited background and turn white. What might I be missing? My fiddle is here

my css code is here

#fullwidth{
   width: 100%;
   /* background: url(../images/bg.jpg);*/
   background-color: black;
   background-repeat: repeat;
   position: relative;
   top: 0;
}

#fullwidth .container{
   width: 994px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   background: transparent;
}

#fullwidth .test{
   float: right;
}

my div is here

<div id="fullwidth">
        <div class="container">
            <div class="test">
                <ul id='header_nav'>
                    <!--li><img src="images/home-icon.png" /></li-->
                    <li><a href="../design.php">Design</a>
                        <ul>
                            <li><a href="../designproducts.php">Products</a></li>
                        </ul>
                    </li>
                    <li><a href="../events.php">Events</a>
                        <ul>
                            <li><a href="../eventsservices.php">Services</a></li>
                            <li><a href="../eventsgallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../pr.php">Public Relations</a>
                    </li>
                    <li><a href="../outdoor.php">Media and Outdoor</a>
                        <ul>
                            <li><a href="../outdoorservices.php">Services</a></li>
                            <li><a href="../outdoorgallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../production.php">Production</a>
                        <ul>
                            <li><a href="../productionservices.php">Services</a></li>
                            <li><a href="../productiongallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../login.php">Login</a>
                        <ul>
                            <!--li>Register</li-->
                        </ul>
                    </li>
                </ul>

            </div>
        </div>
    </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add this

    HTML

    <html>
<head>

</head>
<body>
    <div id="fullwidth">
        <div class="container">
            <div class="test">
                <ul id='header_nav'>
                    <!--li><img src="images/home-icon.png" /></li-->
                    <li><a href="../design.php">Design</a>
                        <ul>
                            <li><a href="../designproducts.php">Products</a></li>
                        </ul>
                    </li>
                    <li><a href="../events.php">Events</a>
                        <ul>
                            <li><a href="../eventsservices.php">Services</a></li>
                            <li><a href="../eventsgallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../pr.php">Public Relations</a>
                    </li>
                    <li><a href="../outdoor.php">Media and Outdoor</a>
                        <ul>
                            <li><a href="../outdoorservices.php">Services</a></li>
                            <li><a href="../outdoorgallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../production.php">Production</a>
                        <ul>
                            <li><a href="../productionservices.php">Services</a></li>
                            <li><a href="../productiongallery.php">Gallery</a></li>
                        </ul>
                    </li>
                    <li><a href="../login.php">Login</a>
                        <ul>
                            <!--li>Register</li-->
                        </ul>
                    </li>
                </ul>

            </div>
        </div>

        <div class="cler"></div>
    </div>

</body>

    Css

    .cler{
    clear:both;
}

    on your last div child end

    demo

    ———-
    2nd option is

    write this css

    #fullwidth:after{
content:'';
    clear:both;
    overflow:hidden;
    display:table;
}

    Demo-2

    • 0