Have position be fixed horizontally but able to scroll vertically

Question

Update: Link to site

What I'm asking is what would be a css positioning solution to allow an element to stay fixed horizontally but scroll up and down, because if you set the map and right hand side ordered list to fixed it doesn't allow you scroll down

Here is a pic of the page

What I want is for the three column grid to be fixed horizontally, but for them to scroll vertically. This is because the line of red circles goes beyond the right side. Here is the HTML structure:

<h3 class="yo">Crimes per ward</h3>
<h1 class="click-to-see"><a class="link-ward see-by-ward"href="/cases/wards">Click To See By Ward</a> </h1>
<h1 class="click-to-see"><a class="link-ward see-by-crime-count"href="/cases/wards">Click To See By Crime Count</a> </h1>

<div class="d3-wrapper">
  <span class="load-animation" style="background:url(../img/dashinfinity.gif) no-repeat center center;width:150px;height:150px;"></span>  
</div>
<div class="ward-wrapper">
  <article class="map-wrapper"></article>
  <article class="ward-info"></article>
  <article class="specific-data"></article>
</div>

css

.map-wrapper {
  margin-left: 10%;
  float: left;
  width: 30%;
}
.ward-info {
  padding-left: 8%;
  display: inline-block;
  width: 30%;
  position: fixed;
}
.specific-data {
  margin-left: 10%;
  float: right;
  width: 30%;
}

Everything but the three column grid elements have position: static, so they scroll vert and horiz.

What is your question? Are you asking us to write the CSS for you? — Rob, Apr 10 '16 at 02:43
I'm still not clear what you are asking but judging by the fact that your total width adds up to over 100%, I'm betting that's your problem. It would be nice to know what the problem is and what you are wanting us to help you with. — Rob, Apr 10 '16 at 02:48
Would it not be easier to make the red dots fixed and scroll-able instead of making the bottom follow it? (I think that's what he means. That when he scrolls left-to-right, the bottom part stays in sight, fixed, but he can still scroll up and down) So, why not put a `width:100%` on the top part width `overflow-x:scroll`, instead? Scroll within the red-dot container instead of on the entire web page — NoobishPro, Apr 10 '16 at 02:49
Here's a link to the site if that helps: https://chi-crime.herokuapp.com/cases — Mitch Kroska, Apr 10 '16 at 03:07
http://stackoverflow.com/questions/2049845/css-fixed-position-on-x-axis-but-not-y, https://www.google.com/search?q=position+fixed+in+one+direction+only — CBroe, Apr 10 '16 at 03:24
@Babydead: You were right on the money! Here's the end result: https://chi-crime.herokuapp.com/cases — Mitch Kroska, Apr 10 '16 at 03:50
@MitchKroska glad I could help. I'll put it in an answer so you can accept it. — NoobishPro, Apr 10 '16 at 03:55

score 0 · Answer 1 · answered Apr 10 '16 at 03:34

I added the magin:0 auto; to the main div only, since all inside objects will follow its motion, which is to scroll vertically. Scroll bar should appear if page height < page content height. Delete 'margin-left:10%; unless that is your column spacing. The 'auto' setting centers a div on the page and allows for vertical scrolling.

 <div class="d3-wrapper">
  <span class="load-animation" style="margin:0 auto;background:url(../img/dashinfinity.gif) no-repeat center center;width:150px;height:150px;"></span>  
</div>
<div class="ward-wrapper">
  <article class="map-wrapper"></article>
  <article class="ward-info"></article>
  <article class="specific-data"></article>
</div>

score 0 · Accepted Answer · answered Apr 10 '16 at 03:55

putting it in an answer from a comment (my own comment)

Would it not be easier to make the red dots fixed and scroll-able instead of making the bottom follow it? (I think that's what he means. That when he scrolls left-to-right, the bottom part stays in sight, fixed, but he can still scroll up and down) So, why not put a width:100% on the top part with overflow-x:scroll, instead? Scroll within the red-dot container instead of on the entire web page

score 0 · Answer 3 · answered Apr 10 '16 at 04:08

The answer to my problem was to remove position: fixed from all elements inside the three column grid, then set the div surrounding the line of red circles to position fixed with an added property of overflow-x:scroll;

Thanks everybody for the suggestions and help!

<div class="wrapper"></div>
  <h3 class="yo">Crimes per ward</h3>
  <h1 class="click-to-see">
    <a class="link-ward see-by-ward"href="/cases/wards">Click To See By Ward</a> </h1>
  <h1 class="click-to-see">
    <a class="link-ward see-by-crime-count"href="/cases/wards">Click To See By Crime Count</a> 
  </h1>

 <div class="d3-wrapper">
   <span class="load-animation" style="background:url(../img/dashinfinity.gif) no-repeat center center;width:150px;height:150px;"></span>  
 </div>
 <div class="ward-wrapper">
   <article class="map-wrapper"></article>
   <article class="ward-info"></article>
   <article class="specific-data"></article>
 </div>
</div>

css

.d3-wrapper {
  overflow-x:scroll;
}

.map-wrapper {
  padding-left: 10%;
  float: left;
  width: 30%;  
}
.ward-info {
  padding-left: 8%;
  display: inline-block;
  width: 30%;
}

.specific-data {
  padding-left: 10%;
  float: right;
  width: 30%;
}

Have position be fixed horizontally but able to scroll vertically

3 Answers3