SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div box within div box

    Hi

    I have a div box within a div box.

    <div id ="outerbox">
    <div id = "innerbox">

    </div>
    </div>

    How do I make the outer box relative to the innerbox? So when the inner box expands the outerbox will expand with it.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Jaynesh View Post
    How do I make the outer box relative to the innerbox? So when the inner box expands the outerbox will expand with it.
    It does that by default.

    If that's not happening for you, it probably means that your inner box has something like position:absolute applied to it. That's generally a bad idea. Perhaps post some more details about what you need here.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    If that's not happening for you, it probably means that your inner box has something like position:absolute applied to it. That's generally a bad idea. Perhaps post some more details about what you need here.
    In addition to what ralph said check that you haven't given the outer element explicit dimension OR that you aren't floating the in inner box.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.

    I also want it to contain text without it going outside the box.

    When I put text in and if its too long it leaves the box.

  5. #5
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    In addition to what ralph said check that you haven't given the outer element explicit dimension OR that you aren't floating the in inner box.
    Hi. I actually am floating the inner box, because i want it aligned to the right.
    what is my alternative?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Jaynesh View Post
    Hi. I actually am floating the inner box, because i want it aligned to the right.
    what is my alternative?
    Apply overflow: hidden to the container, and make sure not to put a fixed height on the container.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Since nobody is coming right out and saying it, can we see some REAL code for what you are trying to do -- as in the HTML and the CSS -- as in ALL of it?

    Trying to diagnose from tiny snippets is like doing brain surgery via telegraph.

    Though from what you've described so far, it sounds like you're declaring heights and positioning you shouldn't be in the first place. Seeing the actual page would help confirm that so we can actually tell you where you are going wrong.

  8. #8
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi. I messed up my code so badly that due to ultimate frustration, i've decided to start again from scratch.

    Ive created an image which should give you an idea of what I want to achieve. (ignore the colors)

    http://i.imgur.com/7OeY7.jpg

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I think we've already mentioned what you need to know. Do you understand what was said above?

  10. #10
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, sorry I missed your post.

    Quote Originally Posted by ralph.m View Post
    Apply overflow: hidden to the container, and make sure not to put a fixed height on the container.
    You mentioned that I should not put a fixed height on the box.

    What if I want it to be a certain height and then have it expand if the content expands?

  11. #11
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry stupid question. TOPIC SOLVED.

    Thanks guys.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Jaynesh View Post
    What if I want it to be a certain height and then have it expand if the content expands?
    You could use min-height instead of height.


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
  •