1 reply [Last post]
AdamParry
AdamParry's picture
Offline
newbie
Last seen: 4 years 40 weeks ago
Timezone: GMT-7
Joined: 2010-01-24
Posts: 1
Points: 2

I have multiple columns, each with a header at the top. I want the header to stay at the top of the column as a user scrolls down, but I also want it to move with the column if the user needs to scroll left or right to see the later columns (on a small screen for example). Something like a fixed vertical position but unfixed horizontal. Any ideas of how I can do this with CSS? I looked around the forum and couldn't find the solution or a similar post. Thanks in advance for any help.

Here is the CSS i'm using currently

.column {
height: 2500px;
width: 300px;
margin-left: 10px;
float: left;
background-color: #CCC;
}
.columnheader {
background-color: #666;
height: 20px;
width: 300px;
position: fixed;
text-transform: uppercase;
color: #FFF;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
top: 0px;
}

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 3 years 4 days ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hi, I think you'd just want

Hi,

I think you'd just want the headers to be INSIDE your columns. You can then put an overflow box as a sibling inside the columns, though that does mean each individual column gets its own scrollbar. But this way, all the columns and their contents can scroll from side to side if necessary.

pseudocode:

<div class="col">
  <h2>Teh Header</h2>
  <div>
    <p>Column content</p>
  </div>
</div>

.col {
set width;
float: left;
whatever else;
height set?
}

.col div {
overflow-y: auto;
overflow: auto;
may need dimensions
}

Overflow-x and -y were initially IE-only properties, later added into CSS3, which means some modern browsers may support and others won't. So you'd have to pick one that works for the browsers you're testing on, OR just make sure the inner contents are never wider than your col div (to prevent a horizontal scrollbar on the columns).

I've seen a way to have the scrollbar remain on the side of the browser with columns and fixed headers, however they did not scroll to the side.

I'm no expert, but I fake one on teh Internets