SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    #wrapper wont extend with absolute divs

    Hi all

    Having a problem with my layout regarding my #wrapper. My wrapper is position: relative; with a border 1px and my #left,#right are position: absolute; and kept inside my #wrapper <div> tag.

    My wrapper wont extend down the page with #left, #right?

    CSS:

    Code:
    html, textarea {letter-spacing: 1px;height: 105%;}
    * html #wrapper{height:1%;}
    #wrapper {position: relative;width: 750px;height: auto;margin: 0px auto;border: 1px solid #333333;}
    
    #left {position: absolute;left: 10px;top: 310px;height: auto;width: 340px;letter-spacing: 1px;}
    
    #right {position: absolute;left: 375px;top: 310px;height: auto;width: 365px;}
    HTML:
    HTML Code:
    <body>
    <div id="wrapper"><!-- Start Wrapper -->
    <p><img src="images/banner.jpg"></p>
    
    <div id="nav">
    <p>links...</p>
    </div>
    
    <div id="left">
    <h2> Welcome</h2>
    </div>
    
    <div id="right">
    <h2> Welcome</h2>
    </div>
    
    </div><!-- End wrapper-->
    ??? many thanks

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolute positioning removes elements from the flow, so #wrapper doesn't know where they end.

    I suggest you learn more about CSS Layout/Positioning Techniques.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that, just doing a bit of reading now. just thought that the relative acts as the container and the Absolutes positon themselves of this?

    so why is my #wrapper not extending?

    thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    just thought that the relative acts as the container and the Absolutes positon themselves of this?
    As All4nerds link will explain you can set the parent to position:relative which will give you a starting point for the absolutely positioned container.

    However the absolute container is removed from the flow and will have no effect on the parent container at all. It just uses the top left of the parent as its basis for positioning co-ordinates but that's as far as it goes. It will have nil effect on the parent or on any other containers for that matter.

    Absolute elements are islands unto themselves and care not a jot about anything else.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thnaks for the link and cheers all4nerds.

    So there is no way of getting my position:relative container to extend with absolutes containers inside?

    Will I have to just set a size the absolute content wont go beyond?

    or

    use overflow: auto; on the absolute

    So generally speaking the absolute just measures of the relative

    thnaks agin guys

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not quiet sure all4nerds but ive applyd a set height for my relative container and gave my absolute containers a size as well and added overflow: auto;.

    Problem now the scroll bars take up some space and push my content to the side?

    Cheers everyone!

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    Things are still the same as above. My #wrapper position:relative wont extend down the page with #left, #right position:absolute.

    I have a border 1px on #wrapper position:relative and want it to wrap around the #left, #right position:absolute inside it. ??

    Cheers!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    use floats instead

    Absolute layouts never work unless they are of the simplest design.

    If you just want a 2 column layout then use floats and then just make sure they get cleared to make the parent extend.

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes i was thinking that myself had a similar problem a while back and had to refer to floats, cheers.

    "..make sure they get cleared to make the parent extend." can you explain?

    thanks!

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You All4nerds

    I get the picture now.

    Thanks Everyone!

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    ..make sure they get cleared to make the parent extend." can you explain?
    Floats are removed from the flow and therefore a parent container that holds only floats in fact holds nothing. If that parent had a background color or border then it would not follow the float down because its height would be zero.

    By clearing the float you regain control of the flow of the document once again and the parents borders and backgrounds are dragged beyond the float.

    There are various ways to clear floats and they are explained in the css faq so have a read there for alternative clearing methods.

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B i was hopin you'd get back Cheers!

    thanks for your time guys!!


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
  •