Fixed header with horizontally scrolling content

Report · Aug 21, 2017

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!

Report · Aug 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...

your header info

</header>

your scrolling content

</div>

your footer info

</footer>

</body>

Report · Aug 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 & Moderator

Report · Aug 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

Report · Aug 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 & Moderator

Report · Aug 22, 2017

I have to agree with Nancy, in that you are making assumptions that are not realistic.

Both the MS surface pro, and the ipad pro have resolutions of 2900 px +, depending on device size. You are also going to have to control all the various device displays using media-queries, as the viewport meta tag device scale attribute cannot be uses. If it was used the mobile device would shrink your page to fit the viewport.

Also do not forget that even on desktops, users do not like scrolling horizontally.

Report · Aug 22, 2017

I don't recall asking anyone for advice on layout. It's just a simple online portfolio, only to be viewed by a small group of users.

My question was how to set up a fixed header and footer with a scrolling content area. John answered that. Anyone who wants to have a discussion on layout should open a new thread.

Please stop adding to the thread...the original question was answered.

Report · Aug 22, 2017

You posted in a public web forum which means anyone who finds this topic on web searches today, tomorrow or well into the future will be able to add comments. That's how public forums work. If that offends you, I suggest disabling email from your forum preferences so you don't keep getting copies of replies to your inbox.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 22, 2017

Thanks John!

Fixed header with horizontally scrolling content

1 Correct answer