www.webdeveloper.com
Results 1 to 7 of 7

Thread: CSS absolute

  1. #1
    Join Date
    Nov 2002
    Location
    Canada
    Posts
    65

    CSS absolute

    Ok, a while ago I thought 'position:absolute' meant an absolute position on the entire page. Then I read somwhere that the position was absolute but relative to what it was inside of. And when I read this and tested it, it worked. But i just used it on a site, and the position top:10px; right:20px;, is placing it at the complete top right corner...

    Any ideas? Did I forget something that I overlooked last time?

    Phil

  2. #2
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    Place your element inside another element that is relatively positioned.

    example:

    <div ... style="position: relative;>
    <div ... style="position: absolute; top: 5px; left: 5px"></div>
    </div>

    Now, whenever the relative layer is, the absolute layer should be 5 from the top and left of that.

    Havik

  3. #3
    Join Date
    Nov 2002
    Location
    Canada
    Posts
    65
    Excellent, that worked perfectly. However, in another situation Im having difficulty placing some text. Works fine in IE, not in the others.

    <div id="wnd">
    <div id="menu">blahblah</div>
    <div id="content">yadayada</div>
    </div>

    Ok, they both have, whatever they have... The menu is 200px wide, float:left, no margin. The content is variable width, also float:left.

    Now, in IE the text stays inside 'wnd' and resizes and everything the way I want it. In mozilla, NN and other browsers, the text falls out of the 'wnd'.

    When I specify a width to 'content', it goes back inside the 'wnd', but does not resize it at all. Because of float.

    Are there any work arounds or anything that I may have missed?

    Thanks again.

  4. #4
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Absolute positioning:
    A block is absolutely positioned with respect to its first parent contained that is positioned.
    example:
    Code:
    <body style="margin: 50px">
    <div style="position: absolute..." id="div1">...
        <div id="div2">...
            <div style="position: absolute..." id="div3">...</div>
        </div>
    <div>
    ...
    </body>
    div1 does not contain any parent element that is positioned. Hence it will be positioned with reference to the viewport (i.e. your screen)

    div2 will be displayed in its normal position

    div3 is contained in div2. But div2 is not positioned. The first positioned parent for div3 is div1. hence div3 will be positioned absolute within div1, i.e. its position will be with reference to div1.

  5. #5
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Floating elements:
    IE displays it incorrectly. A floated element should have width explicitly defined. If not, it takes width of its parent.

    So your example will display as
    Code:
    --------
    | Menu |
    --------
     --------------------
     |     Contents     |
     --------------------
    If you want them to be displayed side-by-side, use
    div#menu {width: 200px; float: left}
    div#contents {/* Dont need anything here */}

    Of course, you'll need some margin to make sure that contents dont run adjecant to menu. After the height of the menu is passed, the contents will wrap below the menu. To avoid that, you can use
    div#contents{margin-left: 200px}

  6. #6
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571

    IE float bug alert

    While we are at it, you may want to read:

    3 px IE bug:
    http://www.positioniseverything.net/...reepxtest.html
    ** Curse bill gates To my knowledge, there is nothing more you can do. **

    Float model bug:
    http://www.positioniseverything.net/floatmodel.html
    ** If you specify width to #contents, then float it. **

  7. #7
    Join Date
    Nov 2002
    Location
    Canada
    Posts
    65
    Thanks, those will help.

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