Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute Position Negative Bottom Left

    Hi all,

    It's been a long time since I've posted but I've got an interesting issue going on that I can't seem to understand. I've got a container that has position:relative. Within that I've put an absolutely positioned box and set a negative bottom and right on it so that it sits just outside the bottom right of the container. Unfortunately, in all browsers I have found that the inner box is registered as part of the flow and scrollbars will initiate at the point of the box -- and not at the point of the container element.

    I'm attaching a photo of what I'm talking about but if you'd like to test it yourself, here's the code:

    Code:
    <style type="text/css" media="screen">
    #container {
    	width:960px;
    	height:500px;
    	position:relative;
    	background:#000;
    }
    #box {
    	width:400px;
    	height:400px;
    	position:absolute;
    	bottom:-200px;
    	right:-200px;
    	background:#eee;
    }
    </style>
    
    <div id="container">
    	<div id="box"></div>
    </div>

    Has anyone come across something like this? Is there any way around it? It's pretty necessary for me to be able to have something absolutely positioned to the bottom left of a container without it disrupting the flow...

    Thanks for any help ya'll can give me!
    Attached Thumbnails Attached Thumbnails Absolute Position Negative Bottom Left-screen-shot-2010-05-04-4.23.13-pm.png  

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    overflow:hidden; on the #container parent should do the trick

  • #3
    Regular Coder
    Join Date
    Mar 2007
    Posts
    120
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Fang,

    Unfortunately that won't work because the parent is the body. Even so, adding overflow:hidden to a parent element would crop the container box so that the absolutely positioned box would be cut off. I don't want the cut off box to not be shown and I also don't want to remove the scrollbars from appearing when the window is less than the size of the container element (which is what would happen if I put overflow:hidden on the body). What I want is to be able to absolutely position a box outside of it's container element on the bottom right without it disrupting the flow -- without the window thinking there is something there and adding scrollbars to the page before the window is less than the size of the container element.

    The only thing I can think to do is to use JS to add overflow:hidden to the body when the window is greater than the size of the container element, but then add overflow:visible when the window is less than the container element. It's not the greatest solution but it's the only thing I can think to do at this point.

    Has anybody else had a similar issue and has found a more elegant fix?

    Thanks


  •  

    Posting Permissions

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