#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Vancouver
    Posts
    100
    Rep Power
    12

    CSS: can an object be bigger then its parent?


    Say you have this:

    <p>
    blah
    <span> blah blah </span>
    </p>

    with the css:

    p {
    width: 100px
    height: 100px

    }

    span {
    width: 200px;
    height: 200px;
    top: 50px;
    left: 50px;
    }



    As you can see, the span is twice as big as the p which contains it. In this case, the p object will stretch to accomodate the child (don't parents always? ) to 250x250 px.

    If I were to set the overflow to hidden the p would remain at 100x100 px, but only the top left 50x50px portion of the span would display (the rest is clipped).

    Is there a way (in CSS *alone*) to somehow get BOTH elements to display at their defined size (i.e. the span "floats" on top of the p) WHILE still being able to maintain the span's 50x50 offset RELATIVE to the p's dimensions. (in other words, absolute positioning is not the answer - unless I'm missing something).

    Thanks,
    Ruy
    the DOM hates me
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    You nearly answered it yourself in your question, try this:

    Code:
    span { 
    width: 200px; 
    height: 200px; 
    float: left;
    position: relative;
    top: 50px; 
    left: 50px; 
    }
    If you come across problems with the <P> still taking up space as if it were including the span within it (not sure if and when it will occur - but I have a sneaky suspision that IE may want to do it that way) try using a clip on the <P> too.
    Although you may have to fiddle with the positioning too.

    -D
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Vancouver
    Posts
    100
    Rep Power
    12
    tried that - no go
    and i have been messing around with positioning without much luck :P
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    just remember to add display:block; to the css,
    when you assign width, height, to a inline element.
    Last edited by Akh; September 24th, 2003 at 10:38 AM.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Vancouver
    Posts
    100
    Rep Power
    12
    actually for the particular thing I need this for it will be divs which are block elements by default (i think) - i used p and span as examples.

IMN logo majestic logo threadwatch logo seochat tools logo