Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Senior Member
    Join Date
    Aug 2006
    Posts
    131
    Member #
    13656
    Hey All,

    I am wondering if it is possible to make a <div> container that grows depending on the size of the other <div> inside of it. Basically the scenario that I am going for...

    - I have a container <div> that centers all other <div>s on the page.
    - The container <div> has a double border on it that I would like to appear all of the time.
    - Depending on the content from page to page that sizes the <div>s inside the container <div> I want the container <div> to change (in height) so that the border stays and so that I can just keep the CSS definitions the same and not worry about changing them on every page.

    Is this possible?

    A cheesy way to do this is to just put a whole bunch of line breaks in the container <div> until the page is the height that I want it to be. That's fine, but it makes the code look sloppy and there HAS to be a better way to do this.

    ~darknailblue
    Christopher Carvache
    Web Developer / SEO
    Northeast Web Design
    +1.860.906.7802

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    ... The div container should always grow depending on the size of its contents, unless they're floated or absolutely positioned.

  4. #3
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    If the overflow is set to auto, hidden, or scroll, and there's an explicit height, the div won't resize.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  5. #4
    ljm
    ljm is offline
    Senior Member ljm's Avatar
    Join Date
    Aug 2006
    Location
    Manchester, England
    Posts
    284
    Member #
    13684
    Liked
    1 times
    How about if you use min-height?

  6. #5
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Ideally that would work, but guess what doesn't support min-height: the same browser that renders the Acid2 test like this:



    (okay, that's not fair; it's an older version of this crappy browser that doesn't support min-height)
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Ah, point. And if you're asking for growth based on a height, it probably means you're already setting an initial height.

  8. #7
    Senior Member
    Join Date
    Aug 2006
    Posts
    131
    Member #
    13656
    I haven't tried it, but I don't think min-height would be the answer. That would set the min-height but wouldn't fix the problem of having the <div> resize. The only properties the container <div> has are:

    width: x;
    margin: 0px auto;
    position: relative;

    It's just a container <div> that needs to center everything on the page. I am trying to get the container <div> to resize based on the size on of the <div>s inside of it. Please tell me if I am wrong, but i thought <div>s resized based on content; content being defined as text, images, etc. but not other layer <divs>. When using a container <div> a height is usually not specified. The only way I can make the container <div> bigger right now, is to manually put a whole bunch of line breaks inside of it to make the height bigger. It works but is extremelly cheesy. The only reason that I am trying to do this is because I want a border around the container <div>. It looks nice! Any other suggestions?

    ~darknailblue
    Christopher Carvache
    Web Developer / SEO
    Northeast Web Design
    +1.860.906.7802

  9. #8
    Senior Member
    Join Date
    Aug 2006
    Posts
    131
    Member #
    13656
    I found it! Basically all you need to do is make sure that the other <div>s inside the contain are also positioned relatively. And that's it!
    Christopher Carvache
    Web Developer / SEO
    Northeast Web Design
    +1.860.906.7802


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:23 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com