SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make 2 divs static even when page content scrolls?

    Hi,
    i wondered if anyone could help.

    I'm trying to find a tutorial whereby on a page the top div and right div remain in the same position on the screen, and the left div can scroll up and down with the browser scroll.

    I found the example below but that is for keeping 1 div in the same position. Anyone know how to apply the same thing to a second div?

    http://www.webspeaks.in/2011/07/new-...ar-jquery.html

    Any help would be great.

    Regards Jez

    Code below, without any jquery/javascript.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .top {
    	background: #999;
    	height: 100px;
    	position: absolute;
    	z-index: 5;
    	left: 0px;
    	top: 0px;
    	width: 100%;
    }
    .right {
    	background: #999;
    	height: 100px;
    	position: absolute;
    	z-index: 5;
    	top: 110px;
    	width: 30%;
    	right: 0px;
    }
    .left {
    	width: 68%;
    	margin-top: 110px;
    	background: #CCC;
    	min-height: 400px;
    }
    -->
    </style>
    </head>
     
    <body>
     
     
    <div class="top">keep in same position</div>
     
    <div class="left">content can scroll with the page</div>
     
    <div class="right">keep in same position</div>
     
    </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You don't even need JS for this, you can simply apply position: fixed to the selector instead of position: absolute and it will stay in a fixed position on the page.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does that work in all browsers? thanks for the reply though

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    It doesn't work in IE6 but as a fellow web developer i don't support IE6 anymore unless a client specifies it, there are plenty of reasons why not to support it anymore but the main reason can be found at http://www.ie6countdown.com/


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •