SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting relativefor container, then absolute for inside elements

    I was reading on mezzoblue today and they talk about setting the containing DIV to relative and the inner elements to position absolute.

    So I tried this and so far its not going to good.

    The container doesn't expand to the inside elements. I set its background and borders to a darker color then white to test this, and the rest of my inner divs position correctly in relation to the container, but just doesn't have the background of the container. Anyways, here is my code

    Code:
    <style type="text/css">
    <!--
    div#container {
     background-color: #CCCCCC;
     border: 1px solid #999999;
     position: relative;
     margin-right: auto;
     margin-left: auto;
     width: 600px;
     height: 100%;
    }
    div#header {
     background-color: #A4D1FF;
     border-top-width: 2px;
     border-right-width: 2px;
     border-bottom-width: 2px;
     border-left-width: 2px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #999999;
     border-right-color: #000066;
     border-bottom-color: #000066;
     border-left-color: #999999;
     position: absolute;
     left: 10px;
     top: 10px;
    }
    div#header h2 {
     font-family: Geneva, Arial, Helvetica, sans-serif;
     font-size: 17px;
     color: #003366;
     margin-left: 5px;
     padding-bottom: 5px;
    }
    div#leftmenu {
     background-color: #999999;
     padding-right: 15px;
     border-right-width: 1px;
     border-right-style: dashed;
     border-right-color: #000066;
     position: absolute;
     left: 10px;
     top: 100px;
    }
    div#content {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #000000;
     position: absolute;
     width: 300px;
     left: 200px;
     top: 200px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header"><h2>This is a header</h2></div>
    <div id="leftmenu">Left menu</div>
    <div id="content"><p>This is some content jdsal; lsdj fasdljf sdljflskadjf lj ;fjs; fslfjd
    sdfsldka jfsld;akfj ;lskj lasjf sldjfa;sljdlskjf sdljf ;sdfj ;sdlakfjd;slkfjds;lfkjsad
    lksdjaf ;lasdkjf ;aslfjsdlkfdsk jflkdsj lkjdsf;l aslkdfj;l askjflksdafj ;ldkjf
    jlkjsda; fj;lkdsfj ljdslfkjsdaflsd fkldsjflkfjsd;</p></div>
    <div id="footer">This is a footer</div>
    </div>
    </body>
    </html>
    Any help is appreciated.
    Thanks
    Bryan

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Bryan,

    You've forgotton the most basic rule about absolutely positioned elements and that is "They are removed from the flow of the document".

    All the position relative does is provide you with a stacking context (basically a new point of reference) for the abs placed container. Other than that the abs container is on its own i.e. it will not interact with any other elements on the page (except for the bugs of course).

    For the outer container to encompass the content the content will need to be statically positioned (with margins (or floats with clear etc)) or the outer will need to be given a height to encompass the content.

    Absoloutely positioned layouts are great for placing everything where you wnat it in a fixed environment but they need a lot of care in fluid layouts.

    Your example above could just be done using margin-left and margin-top on statically positioned elements and floating any elements that need to exist alongside other elements.

    I hope that all make sense.

    Paul

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. I am going to have to read over it a couple more times, but I believe it makes sense. ABS and Relative have always been gray areas for me in the understanding sense

    Here is the link to mezzoblue and their examples.

    http://www.mezzoblue.com/archives/20.../positioning_/

    Thanks

  4. #4
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess what I forgot was in this example, I am doing a fixed width centered piece, hence the width of 600px and margin auto for right and left.

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so how does the guy at mezzoblue get his box to be the height he wants while still getting his text to appear inside it?

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Explicit height

    Because "the guy" (Dave Shea) sets an explicit height for the container element:
    Code:
     
    #parent {
    position: relative;
    height: 200px;   <=== that one!
    }
    Regards,
    Ronald.

  7. #7
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why wouldn't 100% work like in mine?

    Thanks

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    why wouldn't 100% work like in mine?
    Because it's 100% of nothing

    You need to define the height of the body so that the 100% has something to refer to.

    e.g.
    Code:
    html,body {height:100%}
    Paul

  9. #9
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the clarification.

    Bryan


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
  •