Home/ Questions/Q 8365133
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T12:35:14+00:00

I appear to have a peculiar problem. I’ve got the following code snippet and

  • 0

I appear to have a peculiar problem.

I’ve got the following code snippet and as you can see i’ve just added the footer div at the end:

<body>
    <div id="conainer">
        <div id="wrapper">
            <p>this is the wrapper</p>
            <div id="centerDoc">
                <p>this is the centerDoc</p>
            </div>  <!--centerDoc !-->
        </div> <!-- wrapper !-->
    </div> <!--container !-->
    <div id="footer">
        <p>footer</p>
    </div>
</body>

I get the follwing output [I added borders to see whats going on]:

The output:

I hope you can see that the centerDoc div is inside the footer div and i don’t understand why.

CSS for divs:

#container {
   margin:auto;
   width: 100%;
}

#wrapper{
    width:80%;
    border:1px dashed black;
}

#centerDoc {
   margin-top:2.8%;
   margin-left:10px;

   float:left;
   width: 100%;
   border:1px dashed black;
}

#footer{
    text-align:center;
    color:#333333;
    border:1px dashed black;
}

Any pointers to sort this out is appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @animuson is right. you may use “clear: both;” to fix it. see below

    <pre>
#footer{
    text-align: center;
    color: #333333;
    border: 1px dashed black;
    clear: both;
}
</pre>
    • 0