www.webdeveloper.com
Results 1 to 5 of 5

Thread: Absolute, relative, fixed! Oh My!

  1. #1
    Join Date
    Feb 2006
    Location
    Pennsylvania
    Posts
    150

    Absolute, relative, fixed! Oh My!

    I'm having an issue. I'm attempting to set up a simple site using <div>'s instead of tables.

    The page layout is straight forward. I'll have a header which will go across the top of the page. There will then be three columns under that with the site links and content and then the typical footer section with the typical links there. The CSS I started with looks something like this:
    Code:
    #header{
    position: fixed; 
    top: 0px; 
    right: 0px;
    } 
    
    #left{
    top: 0px; 
    right: 0px;
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 30%;
    padding: 30px; 
    }
    
    #center{
    top: 0px; 
    right: 0px;
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 30%;
    padding: 30px;
    } 
    
    #right{
    top: 0px; 
    right: 0px;
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 30%;
    padding: 30px;
    } 
    
    #footer
    I'm sure this is pretty much useless at this point. Would someone please help me out?

  2. #2
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Use position:fixed when you want something to remail in place in the window rather than scrolling with the page. IE6 doesn't support it so you need to use a JavaScript workaround for that browser.

    Use position:relative when you want to swap the order in which columns appear in the page or you want to have elements overlap.

    Use position:absolute with position:relative for overlapping elements or by itself for elements to be moved around using JavaScript.

    For everything else use position:static (which is the default).

    For regular page layout where everything is in the order it needs to display in and nothing overlaps you can position everything correctly using float, clear, width, overflow, margin, and padding.
    Stephen

  3. #3
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033

  4. #4
    Join Date
    Jun 2007
    Posts
    27
    If I understand clearly u r not able to get the overall layout for ur webpage and u want to laout ur page by divs rather than table.
    as I have seen in IE divs size depends on what it is contained in it if u set the size in percentage so write a javascript which gets the size of screen and sets that size to div...run this JS onload and onresize of body.

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by kjeet
    If I understand clearly
    Unfortunately I can't say the same for your post ....

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles