Skip to main content
B
bk31909683
Participant
August 22, 2017
Answered

Fixed header with horizontally scrolling content

  • August 22, 2017
  • 3 replies
  • 6048 views

Looking for a code snippet for a basic website layout with the following:

- fixed header that consists of an image, can be a 1000px wide image named "header.jpg"

- below that, content that will scroll horizontally ( left and right )...can be a 4000px wide image "content.jpg"

- below that, a fixed footer, can be a 1000px wide image named "footer.jpg"

When the middle content scrolls left or right, the header and footer should remain in place, on screen

Thanks in advance for your help!

This topic has been closed for replies.
Correct answer Jon Fritz

All you need to do is set the header and footer positioning with css...

header {

     position:fixed;

     top:0;

     height:50px;

     width:100%;

}

#content {

     padding-top:50px;

     width:4000px;

}

footer {

     position:fixed;

     bottom:0;

     height:50px;

     width:100%;

}

...then in the html...

<body>
     <header>

          your header info

     </header>

     <div id="content">

          your scrolling content

     </div>

     <footer>

          your footer info

     </footer>

</body>

3 replies

B
bk31909683Author
Participant
August 22, 2017

Thanks John!

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 22, 2017

While this layout might work reasonably well on large desktop displays, have you thought about how awkward it will be for people on Tablets & Mobile devices that don't have 1000 or 4000px of screen real estate?

A lot of people use portable web devices now.  It's not an audience most web sites can afford to exclude.

Nancy

Nancy O'Shea— Product User & Community Expert
    B
    bk31909683Author
    Participant
    August 22, 2017

    Hi Nancy,

    Tablets have a landscape-oriented display of 1024px, so as long as the header and footer are 1000 or less, my layout decisions are sound. I expect the user to scroll left or right in the main content area.

    Thanks

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 22, 2017

    You're making assumptions that everybody uses the same orientation, size & pixel density devices.  That's not realistic.

    Good luck.

    Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    August 22, 2017

    All you need to do is set the header and footer positioning with css...

    header {

         position:fixed;

         top:0;

         height:50px;

         width:100%;

    }

    #content {

         padding-top:50px;

         width:4000px;

    }

    footer {

         position:fixed;

         bottom:0;

         height:50px;

         width:100%;

    }

    ...then in the html...

    <body>
         <header>

              your header info

         </header>

         <div id="content">

              your scrolling content

         </div>

         <footer>

              your footer info

         </footer>

    </body>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices