SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Child Div Larger Than Its Parent

    Hi everyone,

    I'm looking to make a layout that's able to resize vertically based on it's content text (i.e. no specified hight). The HTML looks something like this:

    <div id="outer">
    <div id="inner">
    <p>Some Content Text</p>
    </div>
    </div>

    The problem is, I want the inner div to always be 30px taller (+15 at the top, +15 at the bottom) larger than the outer div, without specifying height values.

    Is this possible? What I want could be acheived if negative padding existed, but it doesn't.

    Thanks for the help.

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all thanks for your help. I really appreciate it.

    Just one question, is there any way to do this without floating the parent div?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once again, thanks for the help. You're awesome. The first implementation works best in my case. I needed the outer div to be centered, so i just added a wrapper around it with a specified width and centered the wrapper.

    Just one last question, do you know why the first technique needs to be floated in order to work? For the life of me I can't figure out why it would need to be floated, but it does.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, sorry to bring this old thread back, but I've got a slight problem with my implementation of this trick.

    One image shows Safari on a mac, where things seem to be working just fine. In fact, it looks like it works okay on all standards-complient browsers. However, when you view the page with IE 6, the inner div is messed up. I've tried the * html #inner { height: %1; } trick, but haven't had any luck.

    Any ideas on how to fix this bug? Thanks.

    PS I know the transparency is broken in that photo also... I'm working on it.
    Attached Images Attached Images

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What code are you using?


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
  •