SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Seattle
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Child/Parent Div Problem

    howdy.
    I have a pretty decent knowledge of CSS but this one problem has always eluded me. How to get an absolutlely positioned child div to force it's parent div to accomodate the child's variable length? To better understand my problem visit this link:
    http://www.lookatlao.com/csstest.html
    I've tried numerous variations of hieght, overflow, and relative position to no avail. Any ideas?

    Thanks,
    Geoff.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Short answer: you can't.

    Long answer: You can probably do it with Javascript, as far as dynamically resizing the parent <div> goes.

    Other answer: Why absolutely position it? Relative positioning or using float would probably work just as well.

  3. #3
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Seattle
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I can work around it with margins and floats, I just thought there was a simple answer I was always missing. Floats and IE always cause me trouble. Back to the drawing board…

  4. #4
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Vienna
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anyone knows why in NS7 the parent div does not resize together with child div, when I set the child div to float?

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not just in NS7...all standards-compliant browser will behave that way. the reason: when you set an element to float, you're effectively removing it from the normal flow of the document. thus, it does not occupy any space as such in it's parent container. it's as if you ripped it out of the code, the page readjusts as if it was not there, then stuck it back in, shifting things around a bit to accommodate it (i know, rather blunt shallow description, but it works to visualise it)
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    SitePoint Member
    Join Date
    Jun 2003
    Location
    Vienna
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Redux, thanks for a clear explanation (like usually). Here is the page that I am trying to create. If anyone can give some suggestions I would appreciate it. What I want is following:
    The "purple" div on the right called "German intensive" is set to float:right . What I would like to do is that when it height changes that the whole container div (with blue background) resizes. Redux explained that it can't be done with this float:right (in standards-compilant browsers), so any suggestions would be welcomed. Thanks in advance. And, ohhh yes... the address
    http://www.dom-osmak.hr/test

  7. #7
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just add an element after it that's set clear:both.

  8. #8
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Bangalore
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Child/Parent Div Problem

    To force parent div's width to accomodate the child div's variable length,
    just set the display property of parent div to table!!!

    Its working for me in NS7

    Demo code:
    <div style="width: 300px; height: 300px; background: #ccc; padding: 10px; display: table;">
    <div style="width: 600px; height: 200px; background: #e1e1e1;"></div>
    </div>


    Regards
    Kiran Makam

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    hey that threads a year and a half old ! Where did you dig that up from?

    Display table will allow the element to expand because it gets treated like a table that expands to accomodate its contents. However you might want to use display:table-cell instead to keep Opera7.5 happy

    Paul

  10. #10
    SitePoint Member
    Join Date
    Oct 2004
    Location
    Bangalore
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul

    Pls let me know if any other fixes are required for other browsers.

    << hey that threads a year and a half old ! Where did you dig that up from? >>
    Couple of days back I was searching the net to find solution for child/parent div problem, but none had posted a solution. As soon as I found one, I posted it here, so that it might help others and as well be fine-tuned by Experts like you.

    Kiran Makam

  11. #11
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    hey that threads a year and a half old ! Where did you dig that up from?

    Display table will allow the element to expand because it gets treated like a table that expands to accomodate its contents. However you might want to use display:table-cell instead to keep Opera7.5 happy

    Paul
    And at that time, the FAQ thread explaining the three pixel jogs and such issues did not exist.
    Thanks. I can work around it with margins and floats, I just thought there was a simple answer I was always missing. Floats and IE always cause me trouble. Back to the drawing board…


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
  •