How to make a header the width of the entire page

I’m trying to figure out how to make the width of a header across the entire page. I want to do that and push the notifications section down. It currently cuts off as shown in the image below:

and I want it to look like this

html

 <header>
   <div>
     <app-ao-logo>

     </app-ao-logo>
  </div>
 </header>

css

header {
  width: 100vw;
}

This stretches the header all the way across but the Notifications section is not pushed down.

We’ll need to see more of your HTML and CSS to answer that.

This is all the html that I have. What more do you need to see?

If that were all the HTML you have, the page would be completely blank, yet you show an image with content on the page.

More than just the header, such as the other page elements that affect the layout in the top part of the page.

3 Likes

I get it now. Here is the rest of the code

html

  <div class="sdps-new-layout--two-col-fixed for-demo-fluid-fixed-layout">
   <main role="main">
      <div class="sdps-new-layout--two-col-fixed__main" tabindex="0">
         <app-ao-header> </app-ao-header>
      <app-personalperformance-component [accountViewModel]="accounts" tabindex="1"></app- 
       personalperformance-component>

   <sdps-panel class='sdps-m-top_medium' heading="Contributions" sdps-id="account-overview- 
         panel-contributions" tabindex="2">
    <p class="sdps-text-body">You are currently contributing ...</p>
    </sdps-panel>

   <app-investments [loading]="positionsLoading" [tableData]="financialPositionsTableData" 
       tabindex="3"></app-investments>
   </div>
 </main>
  <aside>
   <div class="sdps-new-layout--two-col-fixed__rail">
     <sdps-panel heading="Notifications" class="sdps-m-bottom_medium" sdps-id="account- 
       overview- 
     panel-notifications" tabindex="4"></sdps-panel>
     <app-rolloveroptions tabindex="5"></app-rolloveroptions>
    </div>
   </aside>
 </div>

css

  @import "lib/scss/variables.scss";
    .sdps-new-layout--two-col-fixed {
       max-width:1440px;
     }

    .sdps-new-layout--two-col-fixed__main {
     @media (min-width: $tablet-landscape-sm-desktop-min) {
     width:962px;
     }
  }

     .sdps-new-layout--two-col-fixed__rail {
       width: 454px;
       @media(max-width: $tablet-landscape-sm-desktop-min) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
     }
   }

Does this help?

What back end system are you using to populate all the code we can’t see?

It looks like you are putting the header inside the left column when it should be above the html for both columns and then it will automatically stretch all the way across both columns.

This would usually be be basic css but none of the code you have posted is basic or indeed actual plain css or html so there’s not enough information for use to answer properly unfortunately.

If you had a link to the page we could offer more pertinent suggestions.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.