How would i go about having a fixed header with a horizontally scrolling body?

Question

Problem

I want to create a header which is fixed which i can do using CSS

#Header{
        position:fixed;
       }

However i can't seem to get the rest of the page to scroll horizontally!

This is my markup so far.

<div id="Header">

    <div class="title">
      <h1>Bass Clef Photography</h1>
    </div>
    <div class="tagline">Passion 4 Live Music & Passion 4 Photography</div>


  <div id="tabsContainer">
   <div class='tab zero'>
      <ul>
        <li><a href="BassClef.html">Home</a></li>
      </ul>
    </div>
   <div class='tab one'>
      <ul>
        <li><a href="#">Music Gallery</a></li>
      </ul>
    </div>
    <div class='tab two'>
      <ul>
        <li><a href="#">About</a></li>
      </ul>
    </div>
    <div class='tab three'>
      <ul>
        <li><a href="#">Clients</a></li>
      </ul>
    </div>
    <div class='tab four'>
      <ul>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
      <div class='tab five'>
      <ul>
        <li><a href="members.php">Members</a></li>
      </ul>
    </div>
  </div>

</div>

<div class="spacer"></div>
<div id="photoframe">
      <div class="pics"> <img src="uploads/picture01.jpg" alt=""></div>
      <div class="pics"><img src="uploads/picture02.jpg" alt=""></div>
        <div class="pics"><img src="uploads/picture03.jpg" alt=""></div>
        <div class="pics"><img src="uploads/picture04.jpg" alt=""></div>
         <div class="pics"><img src="uploads/picture05.jpg" alt=""></div>
      <div class="pics"> <img src="uploads/picture06.jpg" alt=""></div>
      <div class="pics"><img src="uploads/picture07.jpg" alt=""></div>
        <div class="pics"><img src="uploads/picture08.jpg" alt=""></div>
   </div>



   </div>
</body>

It's the div photoframe i wish to scroll horizontally. The tricky thing is the "photoframe" contains images that don't have a fixed width. so i don't want to set its CSS property with a fixed width, like so.

#photoframe
{
Width:1000px;
}

Any help would be greatly appreciated!

score 2 · Accepted Answer · answered May 05 '14 at 20:24

2

#photoframe {
    overflow-x: auto;
}

Put up a jsfiddle with what I think you were trying to achieve.

answered May 05 '14 at 20:24

allicarn

2,859
2
28
47

@aliicam, i know this is not in the scope of the question but how would i position the photoframe at the bottom of the page or at least make the scroll bar appear at the bottom? – Dan Cundy May 05 '14 at 20:57
@DanCundy - the scroll bar should be there with auto when it's needed, but if you want it always there, you can say `overflow-x: scroll;` instead. Some browsers/Operating Systems hide the scroll bar until you're scrolling, most notably the more recent Mac OSs and iOS. There are webkit tricks to get them to show up (see here: http://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar) – allicarn May 06 '14 at 13:27
1

If you want to position it at the bottom, you could also do `position: fixed;` on the photoFrame, or `position: absolute;` and then `bottom: 0;` instead of a top value. Keep in mind that `fixed` is in relation to the viewport (the browser window) versus `absolute` is to the parent with a position (can be `relative`, `absolute`, or `fixed`) See this for more details on positioning: http://www.w3schools.com/css/css_positioning.asp – allicarn May 06 '14 at 13:30
Thank you for your response, i didn't actually word my follow question properly. What i actually meant was how do i make the photoframe fit 100% of the screen. Making the X scroll bar appear at the bottom of the screen as opposed to in the middle. I have achieved this by setting html to height 100% then setting the photoframe to min-height to 100%. Thank you though for responding. – Dan Cundy May 06 '14 at 13:33

How would i go about having a fixed header with a horizontally scrolling body?

1 Answers1