Skip to main content
bk31909683
Participant
August 22, 2017
Answered

Fixed header with horizontally scrolling content

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 is closed to new replies. Start a new post to keep the conversation going.
Jon Fritz
Jon FritzCorrect 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>

View reply

8 replies

bk31909683Author
Participant
August 22, 2017

Thanks John!

Translate
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

Translate
Nancy O'Shea— Product User & Community Expert
    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

    Translate
    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.

    Translate
    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>

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