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 5 of 5
  1. #1
    Junior Member
    Join Date
    Feb 2008
    Posts
    15
    Member #
    16429
    Hi,

    So I have googled extensively on this, but I can't seem to get a solution that works for me.

    I basically have a CSS div that contains several other divs, I want the height of the parent div to be "elastic" so to speak, to expand to fit the divs inside of it. This is because in one of the child divs I have an iframe that I have rigged with javascript to expand it to fit the height of the document inside it. When the iframe expands, the div that holds the iframe expands, but not the parent div (the one that encloses the whole page).

    I know that one problem could be that all of my I have all of my css divs are positioned with "absolute". This pretty much because this is how I learned to position divs in css, and I like being able position things with absolute coordinates, and I also often have divs overlapping (as is the case with one of the divs on this page). I find things get a lot more complicated when you get into relative positioning and all that with floats, and its a lot harder to position stuff exactly where you want.

    Anyway, here is my CSS right now, all of the classes are being used for divs. "case" the wrapper or parent div, it is being used to center the whole page. Right now I just have everything at fixed heights. All the other divs are contained with case. The expanding iframe would be contained in the "content" div.

    Code:
    #case{
    position: absolute;
    height: 1000px;
    width: 990px;
    left: 50%;
    margin-left: -495px;
    border: 5px solid black;
    background-color: black;
    }
    #logos{
    position: absolute;
    width: 990px;
    height: 40px;
    text-align: center;
    background-image: url("back.png");
    }
    #dhllogo{
    position: absolute;
    width: 185px;
    height: 200px;
    }
    #image{
    position: absolute;
    width: 805px;
    height: 200px;
    margin-left: 185px;
    }
    #navbar{
    position: absolute;
    margin-top: 200px;
    width: 990px;
    height: 30px;
    text-align: center;
    }
    #content{
    position: absolute;
    width: 990px;
    height: 710px;
    margin-top: 290px;
    background-color: white;
    }
    #grade{
    position: absolute;
    margin-top: 230px;
    width: 990px;
    height: 60px;
    background-color: white;
    }

  2.  

  3. #2
    Junior Member
    Join Date
    Nov 2008
    Posts
    26
    Member #
    17777
    Absolute could be a problem but I was thinking more of a Height and width issue. Make sure for a parent div to not put a height or width or it will stay fixed to the width.
    I am not the greatest at all with css but I ran into problems with my menu and 10 smaller divs it it due to I labeled the main div with a height and width which threw everything off..


    I am not saying its the problem but worth a try

  4. #3
    Junior Member
    Join Date
    Feb 2008
    Posts
    15
    Member #
    16429
    I thought what you said made sense and I thought you had solved it cause when I took out the height property before I had always left the width in. So I tried removing both height and width but it still didn't work.

  5. #4
    Junior Member
    Join Date
    Feb 2008
    Posts
    15
    Member #
    16429
    Alright, I think I solved it. I changed all the child divs to relative positioning, took out the height and width for case. Then case would fit around the child divs, then I just moved all of them back into place, had to negative margin values for some of them, but everything seems to work how I want it now.

  6. #5
    Junior Member
    Join Date
    Nov 2008
    Posts
    26
    Member #
    17777
    Cool yea that was just something I ran into when I was working with divs before.. Glad you got it working


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
  •  

Search tags for this page

absolute position div not taking the height of the parent div

,
css absolute expand parent
,
css parent fits child
,
div margin expands div
,
div not expanding to fit iframe
,
expand parent div height child div
,
expand parent div to fit child
,
fit child div to parent div
,
make div expand in child
,
parent css fit child
Click on a term to search for related topics.
All times are GMT -6. The time now is 09:02 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com