CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ash
Ash

Reputation: 237

Making a Static Div When it scrolls Horizontally

I want to make a div which scrolls vertically but not horizontally. Here`s the image that explains well about the process..

![enter image description here][1]

I want the Y-axis to remain static while it scroll in the right side. Here`s my HTML code 

 <div id="i">
    <div class="column">
     <div id="y_axis"></div>
       <div id="chart"></div>
    <div id="x_axis"></div>
     </div>

Div Chart is where the bars are there. Whenever I scroll right only the chart moves right and not the Y-axis.

CSS

 #chart {

        left: 40px;
        display: block;
float:right;
    }
    #y_axis {
        position:fixed;
        top: 14px;
        bottom: 0;
        width: 40px;
        background-image: url('../img/avg_price.PNG');
        background-repeat: no-repeat;
        background-position:center left;
float:right;


    }
    #x_axis {
        position: relative;
        left: 40px;
        height: 40px;
    }

Tried with Position relative which changes the position of the yaxis itself but not working. What should I do here?

Upvotes: 1

Views: 916

Answers (1)

Xareyo
Xareyo

Reputation: 1377

I Assume your after something like this : Demo Fiddle

I switched from a background-image to img tags in your markup. I've also modified your width's to adjust for the overflow of the image and taken out the chart div:

<div id="i">
  <div class="column">
    <div id="y_axis"><img src="img/src/goes/here"/></div>
    <div id="x_axis"><img src="img/src/goes/here"/></div>
  </div>
</div>

NB: You can adjust the CSS height's and width's to suit your needs.

Upvotes: 2

Related Questions