SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member dikspence's Avatar
    Join Date
    Jun 2003
    Location
    Edmonton, Alberta, Canada
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Including an Absolutely positioned element in the normal page flow?

    Does anyone know if that is a way to include absolutely positioned elements in the normal page flow? Basically what I would like to do is position a box in the bottom right corner of a "container" div. I have come up with this so far.

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Title</title>
    <style type="text/css">
    body{
    background:#668566;
    margin:0;
    padding:0;
    text-align:center;
    }
    #bottom{
    background:#f90;
    border:6px solid #030;
    bottom:0;
    margin:0 -6px -6px 0;
    padding:0;
    position:absolute;
    right:0;
    width:250px;
    }
    #container{
    border:6px solid #030;
    margin:25px auto;
    padding:0;
    position:relative;
    text-align:left;
    width:600px;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="bottom">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nunc leo, venenatis sed, sollicitudin at, aliquet at, purus. Morbi a est in sem laoreet placerat. Nam pulvinar, mi sit amet volutpat dictum, massa turpis convallis.</p>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu lorem. Cras at tellus. Sed tincidunt, dolor vitae rhoncus accumsan, magna ante viverra justo, non commodo erat mauris eu lectus. Vestibulum scelerisque, lacus ut nonummy blandit, mi diam porttitor dui, vitae laoreet odio lorem vitae mauris. Morbi massa ipsum, sollicitudin in, rhoncus nec, ultricies a, sem. Fusce in eros. Aenean semper molestie sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dolor urna, sollicitudin ut, ornare sagittis, consequat sit amet, purus. Donec sed nibh eu diam elementum malesuada. Proin sed mauris id magna aliquet elementum. Nullam iaculis libero a purus. Donec quis wisi. Nunc nibh orci, rhoncus vitae, blandit in, laoreet vitae, leo. Mauris eros purus, tempor nec, commodo id, ornare quis, turpis. Mauris placerat pretium ipsum. Aliquam eu nibh id dui commodo vehicula.</p>
    <p>Etiam sed pede eget est dapibus suscipit. Ut posuere. Duis sollicitudin bibendum tellus. Fusce sed wisi ut velit vehicula pulvinar. In hac habitasse platea dictumst. Sed euismod turpis eu quam. Curabitur lorem. Maecenas convallis neque. Proin viverra purus vitae felis. Suspendisse feugiat hendrerit purus. Maecenas tristique risus vitae lacus. Morbi semper felis. Proin venenatis, lectus eu placerat mollis, purus orci blandit felis, sed posuere lorem mi vel urna. Nam leo ipsum, convallis quis, placerat ut, tincidunt et, libero. Donec eget magna. Ut fringilla. Aenean viverra accumsan elit. Curabitur sollicitudin eros vitae justo. Cras iaculis blandit wisi. Aenean erat enim, scelerisque sed, imperdiet a, eleifend commodo, metus.</p>
    <p>Pellentesque est urna, pulvinar non, fringilla quis, fermentum eget, felis. Fusce commodo. Nunc odio orci, aliquam in, blandit sed, lobortis a, justo. Nullam non velit. Maecenas ligula. Fusce auctor elit ac odio. Maecenas iaculis lacus. Aenean sed felis. Duis ullamcorper molestie risus. Duis vel est. Integer sit amet nunc.</p>
    <p>Pellentesque vitae tortor et libero accumsan vestibulum. Morbi in massa. Sed sagittis bibendum neque. Donec consequat quam eu massa. Morbi posuere pede in ipsum. Vestibulum sem. Nulla sollicitudin tincidunt justo. Maecenas odio nisl, tincidunt sit amet, cursus tempus, consequat vestibulum, sem. Maecenas feugiat nisl venenatis ante. Curabitur porttitor. Sed laoreet lobortis ipsum. Donec feugiat libero nec nunc. Mauris id massa. Curabitur faucibus, wisi at porta eleifend, risus nunc porta nunc, facilisis gravida augue tortor id libero. Vestibulum sollicitudin molestie urna.</p>
    <p>Nunc magna. Nulla facilisi. Suspendisse risus est, tristique ut, imperdiet a, fringilla vel, diam. Vivamus elementum lorem id urna. Suspendisse non ante. Praesent non sapien ut erat tincidunt pharetra. Curabitur eu dolor id turpis blandit ultrices. Quisque rutrum enim nec arcu. Nam facilisis hendrerit est. Praesent nisl nunc, porta at, suscipit quis, venenatis ut, mauris. Sed ac libero id dolor vulputate aliquam. Aliquam sed neque et leo laoreet bibendum. Curabitur ante sem, ultrices vitae, facilisis ut, ullamcorper nec, libero.</p>
    </div>
      </body>
    </html>
    I would like to have the text wrap around the bottom div but I'm not to sure on how to do it.
    Running Man Design - "It pays to run with us."

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    Vancouver, BC
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would help to see the page in action somewhere. Thanks.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.blooberry.com/indexdot/cs...y/position.htm

    absolute
    [CSS2] [IE4|N4|O4]
    Type: Explicit
    Description:
    This specifies that the element box be absolutely positioned using the 'top', 'left', 'right' and 'bottom' properties. These values use the element box's containing block as origin. Absolutely positioned elements do NOT exist in the normal document flow like relatively positioned elements are - elements that follow will flow as if the absolutely positioned element does not exist.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    I would like to have the text wrap around the bottom div but I'm not to sure on how to do it.
    The only way to do it (afaik) is to float the element in the corner. But of course it will have to be placed in the correct part of the flow of the document to achieve this. (eg above some text at the bottom)

    Paul


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
  •