Home/ Questions/Q 3724082
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T06:30:37+00:00

I have no idea why the #mainControldiv div is not being enclosed by it’s

  • 0

I have no idea why the #mainControldiv div is not being enclosed by it’s wrapper div. Here is the html and css following it:

css:

*
{
 padding:   0px;
 margin:   0px;
}

div
{
 border:   1px solid;
} 

#mainWrapperdiv
{
 width:   1000px;
 margin:   0px auto 0px auto;
} 

#maindiv
{ 
 width:   850px; 
 height:   500px;  
 margin:   50px auto 0px auto;  
 border:   5px solid;
}

#mainControldiv
{
 width:   850px;
 height:   150px; 
 margin:   470px auto 0px auto;
 border:   5px solid;
 float:   right;
}

#moveablediv
 { 
  width:   50px;
  height:   50px;
  background:  lightgreen;   
  position:  relative;
  left:   400px;
  top:   200px; 
 }  

#centerPointdiv
 {
  width:   5px;
  height:   5px;
  background:  black;
  position:  relative;
  left:   22px;
  top:   22px;
 }

It should be pretty straight forward, yet i can’t figure out why the mainControldiv does not show up within the border of the mainWrapperdiv, it’s direct parent. And can you also tell the logic, or the inner reason why it’s not working as I’m expecting, thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You cannot end divs like that, even if a div has no content, it must have a closing tag:

    <div></div>

    So change you structure to be as follows:

    <body>
 <div id = "mainWrapperdiv"> 
  <div id = "maindiv">  
   <div id = "moveablediv" >
    <div id = "centerPointdiv"></div>
   </div> 
  </div> 
  <div id = "mainControldiv"></div>
 </div> 
</body>
    • 0