www.webdeveloper.com
Results 1 to 5 of 5

Thread: fitting absolute positioned divs

  1. #1
    Join Date
    Sep 2004
    Posts
    72

    fitting absolute positioned divs

    hi all...

    trying to do a small tabbed nav without reloading stuff. it's at:
    http://guey.el.net/k/tests/tabs.html

    the thing is i can not figure out why the absoulte positioned divs within the 'con' one are not fitting in the outer 'box' one... it's all in the source...

    can somebody please take a look and explain.....

    thanks...

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by toshog
    hi all...

    trying to do a small tabbed nav without reloading stuff. it's at:
    http://guey.el.net/k/tests/tabs.html

    the thing is i can not figure out why the absoulte positioned divs within the 'con' one are not fitting in the outer 'box' one... it's all in the source...

    can somebody please take a look and explain.....

    thanks...
    Not sure what you're after, but this is a start...

    Code:
    #con div  {
    	position: relative;
    	display: block;
    	margin: 5px 0;
    padding:5px;
    	/*float:left;*/
    	border: 1px dotted red;
    }
    edit:changed "inline" to "block", added "padding:5px;"
    Last edited by WebJoel; 05-28-2006 at 07:26 AM.

  3. #3
    Join Date
    Sep 2004
    Posts
    72
    Quote Originally Posted by WebJoel
    position: relative;
    cool... this seems to be desired..
    whats the point of absolute positioning then?!

    edit:changed "inline" to "block", added "padding:5px;"
    wasn't inline... but thanks...

    thank you....

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by toshog
    cool... this seems to be desired..
    whats the point of absolute positioning then?!

    re:wasn't inline... but thanks...

    Opps, -my-bad! *I* changed your "display:none': to "display:inline;" and it worked and I posted the result, but then realized that it placed the border around every sentence... looked very ugly, therefore I edited my post to changed inline to block...

    thank you....
    "absolute" positioning... think of it as z-index:0, ... it is 'not on the page', but 'floating over it', invisible to the content on the page, which starts at z-index:1. (And before you ask, -yes, IE permits negative-numbered z-indexes, however, compliant browsers won't.)
    I am not a big fan or user of absolsute positioned items. They ARE very useful, but used sparingly.

    You can place an abs-positioned anything inside of a relative-positioned DIV and make it work. But here, since you WANT the contents of the DIV to force-open the outer borders, you have to call this 'relative positioned', or else, it isn't even on the page...
    Not explained too well, I realize. *sigh*
    Last edited by WebJoel; 05-28-2006 at 07:51 AM.

  5. #5
    Join Date
    May 2004
    Location
    Manhattan NY
    Posts
    6,028
    Absolute positioning does one thing you can't do any other way, it allows you to superimpose one element on top of another. I use it only when I have to for the precise reasons that Joel just laid out. When you use it there is no document flow.

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