How to Make DIV Scroll With a Page Using CSS

Save

When designing your website, you may have a specific DIV container that you want to remain visible to your visitors at all times, even when they are scrolling up and down the page. While there are many technologies and programming languages that can be used to make DIV scroll with a page, one of the easiest and most reliable methods is in using CSS styling.

Things You'll Need

  • Access to website source code files
  • Identify where on the page you want your DIV container to be placed. Choose from top or bottom and left or right.

  • Give your DIV container a unique ID for styling purposes. On the page's HTML, your opening DIV tag would look like this:

    <div id="div_name">

  • Open your cascading stylesheet and create an entry for your new DIV container:

    div_name {

    }

  • Add the fixed position style to the style entry for your new DIV container.

    div_name {

    position: fixed;
    }

  • Add left/right style elements to your style entry. Add a side to side positioning element by choosing a side to measure from left or right and a distance to position the element from that side. A value of 0 will place the DIV container all the way up to that side of the page. Other values that can be given are pixel widths (i.e. 125 px) or percentages (i.e. 33 percent). Below is an example:

    div_name {

    position: fixed;
    left:0;
    }

  • Add top/bottom style elements to your style entry. Add a up and down positioning element by choosing a side to measure from (top or bottom and a distance to position the element from that side. a value of 0 will place the DIV container all the way up to that side of the page. Other values that can be given are pixel widths (i.e. 125 px) or percentages (i.e. 33 percent). Below is an example:

    div_name {

    position: fixed;
    left:0;
    bottom:25px;
    }

  • Photo Credit Hemera Technologies/AbleStock.com/Getty Images
Promoted By Zergnet

Comments

You May Also Like

Related Searches

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!