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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div within a div

    I have a parent div layer that has borders. On one of my pages the only thing inside this div is other divs. The sub-divs position themselves beautifully in relation to the parent div even with 'position:absolute' but because I'm using 'position:absolute' the parent isn't recognizing them or something and the border never expands to envelope them. I can't use 'position:relative' because there are sometimes 40 or more divs and when I use 'position:relative' they all get relative to each other and never end up in the right place.

    How do I get the parent div to expand it's borders around them?

  • #2
    $object->toCD-R(LP); vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,073
    Thanks
    2
    Thanked 22 Times in 22 Posts
    It would be much easier to help you if you'd post your code.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  • #3
    Senior Coder TheShaner's Avatar
    Join Date
    Sep 2005
    Location
    Orlando, FL
    Posts
    1,126
    Thanks
    2
    Thanked 40 Times in 40 Posts
    I'm still new to CSS, but from what I've read, don't use either of those positions. Try using the default position - position: normal;

    Here's a good site to read for the theory of box elements and positions. I think this article will really help you with your question:

    http://www.brainjar.com/css/positioning/default.asp

    -Shane

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Abs pos nightmare

    An absolutely positioned element is taken out of the normal flow and hence won't have any influence on its parent; the outer div collapsing is the proper behaviour.

    Without knowing what layout you wish to create it's near impossible to say anything conclusive, but judging by the term "layer" you're using DW to auto-generate an all abs pos based layout.
    Better take the helm yourself and steer clear of DW's "table-cells-replaced-by-abs-pos'd-divs" layout nightmares; learn how to apply CSS positioning to create layouts yourself.

    Absolute positioning has powerful possibilities, but should be used judiciously with a solid understanding of the implications of its use.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried the position:normal but it doesn't listen when I define the top and left elements. I read the article and realized I don't think I'm going to be able to do what I want the way I have in the past.
    Quote Originally Posted by ronaldb66
    Better take the helm yourself and steer clear of DW's "table-cells-replaced-by-abs-pos'd-divs" layout nightmares; learn how to apply CSS positioning to create layouts yourself.
    I do absolutely position certain elements of my layouts - I figure mostly because I'm a control freak. But not often as a replacement for table cells. Except in this case that's what I'm doing. I didn't include the code earlier because it's a nightmare reagardless of any positioning.

    Code:
    <body>
    <div id="divControl">
    <div class="11"><a href="#" onclick="changeActive(0)">
    <IMG src="ab-caught.jpg" width="50" height="50" BORDER=0></A></div>
    <div class="12"><a href="#" onclick="changeActive(21)">
    <IMG src="a-blue.jpg" width="50" height="50" BORDER=0></A></div>
    </div>
    
    <div id="ab-caught" class="pic">
      <IMG src="ab-caught.jpg" width="225" height="305"></div>
    <div id="a-blue" class="pic">
      <IMG src="a-blue.jpg" width="225" height="307"></div>
    </body>
    Code:
    .pic {position:absolute; top:25px; left:5px; width:225px; visibility: hidden}
    .11 {position:absolute; top:10px; left:260px}
    .12 {position:absolute; top:10px; left:330px}
    Then the javascript I didn't include uses the small images as a menu to change the layer of the class="pic" images.

    Are there other CSS positioning could I use to achieve the same effect?

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Example page

    It would really help if you could make the page in question available online: without seeing the actual images and the sort of effect you wish to achieve, it's hard to suggest anything useful.
    If you are unable or unwilling to expose the page online, at least make a screen capture of the section at hand so we can SEE it.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Have a look at this here

    or this-

    or even this.

    Oodles of pictures.

    Might be helpful.

    Frank.
    Last edited by effpeetee; 06-30-2008 at 04:37 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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