Child element of parent(s) not shown as child element at all

Question

Okay here's the deal, I need to understand why my .login form is not placed inside its parent (header tag) or even another parent div I created just to see if it would go inside a div (.header). I do not understand at all how a child element is getting stuck into a separate class (.home-main-nav-menu). Can someone please tell me what is going on here and how to fix it? Thank you for your time!

Review CSS for color map

$(document).ready(function(){
    $('.main-ul').children('li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
});

.home-main-nav-menu{
  border-style: double;
  border-color: cyan;
}
.login{
  font-family: Ailerons;
  float: right;
  border-style: double;
  border-color: red;
}
.header{
  border-style: double;
  border-color: yellow;
}
header{
  border-style: double;
  border-color: blue;
}
h1{
  font-family: Ailerons;
  font-size: 100px;
  color: white;
  text-align: center;
  margin-bottom: -25px;
}
.main-li-items{
  display: inline-block;
  border-style: double;
  border-color: purple;
  padding-left: 0px;
}
.sub-li-items{
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
  border-style: double;
  border-color: yellow;
}
.main-li-items > ul {
  display: none;
  position: absolute;
  margin-left: -4.1px
}
.main-ul{
  border-style: double;
  border-color: green;
  padding-left: 0;
}
ul{
  text-align: center;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>

<body>
  <div class = "header">
  <header>
    <h1>Header</h1>
    <form class = "login">
      Username <input type = "text" name= "username"></br/>
      Password <input type = "text" name ="password"><br/>
      <input type="submit" name= "submit" value="submit" id = "submit">
    </form>
  </header>
</div>
    <nav class = "home-main-nav-menu">
    <ul class = "main-ul">
      <li class = "main-li-items"><a href = "#/">Home</a></li>
      <li class = "main-li-items"><a href = "#/">About Me</a>
        <ul>
          <li class = "sub-li-items"><a href = "#/">Education</a></li>
          <li class = "sub-li-items"><a href = "#/">Lessons</a></li>
        </ul>
      </li>
      <li class = "main-li-items"><a href = "#/">Blog</a></li>
      <li class = "main-li-items"><a href = "#/">Contact</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Email</a></li>
        <li class = "sub-li-items"><a href = "#/">Phone</a></li>
      </ul>
    </li>
      <li class = "main-li-items"><a href = "#/">Portfolio</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Recent</a></li>
        <li class = "sub-li-items"><a href = "#/">All</a></li>
      </ul>
     </li>
      <li class = "main-li-items"><a href = "#/">Collaborate</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Now</a></li>
        <li class = "sub-li-items"><a href = "#/">Later</a></li>
      </ul>
      </li>
    </ul>
</nav>

Duplicate - https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing?rq=1 — Paulie_D, Aug 23 '17 at 14:36

Germano Plebani · Answer 1 · 2017-08-23T15:19:09.313

0

Because you float the form.login. To solve your problem add overflow: auto to .header

Or better use this:

header::after {
    content: "";
    clear: both;
    display: table;
}

Look at this: https://jsfiddle.net/h7csjd8g/

edited Aug 23 '17 at 15:19

answered Aug 23 '17 at 14:35

Germano Plebani

3,164
3
24
36

Doesn't change anything. – Jeffery Gasp Aug 23 '17 at 14:39
He means `overflow: hidden;` – Huelfe Aug 23 '17 at 14:41
No, with overflow hidden on header the form will hidden. With overflow auto the header adjust the height adding the height of the form. But sometimes this method create a scroll bar. Using clear:both on the after is a more efficient and modern solution to claring floated object. – Germano Plebani Aug 23 '17 at 15:09

Child element of parent(s) not shown as child element at all

1 Answers1