CODEWITHSUNDEEP
htmlcss
Ajay Dindayal
Ajay Dindayal

Reputation: 11

Why do my divs not appear within my main div?

I have a main container div and all my other divs are within this main container div. However, I'm seeing that my header is not appearing within my main container, why is that? 

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.header {
  background-color: white;
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 120px;
  overflow: hidden;
  top: 0;
  z-index: 2;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.cartcontainer {
  margin-top: 150px;
  padding-left: 50px;
  width: 100%;
}
<div class="container">
  <header class="header">
    <div class="mid-nav">
      <span class="logo-main">Lifeline's Supplies</span><br>
      <span class="logo-sub">Fashion & Sports Outlet</span>
    </div>
  </header>

  <div class="cartcontainer">
    <h3 class="CartTitle">My Cart</h3>
    <hr class="CartSeparator">
  </div>
</div>

How the structure is showing

Upvotes: 1

Views: 1082

Answers (2)

arieljuod
arieljuod

Reputation: 15838

position: fixed elements are removed from the document flow into a new stacking context. https://developer.mozilla.org/en-US/docs/Web/CSS/position check the docs on the fixed value. This shouldn't be a problem though, it's just a style consideration, on the DOM it's inside it's original parent.

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

Upvotes: 3

Idriss Kissane
Idriss Kissane

Reputation: 46

try

.container{
   display: flex;
   width: 100%;
   height: 100%;
}

instead of 

.container{
   width: 100%;
   height: 100%;
}

Upvotes: -1

Related Questions