<div> not expanding with content

I have a <div> with it's style set to height:auto; Inside that div I have several nested divs with content some of which is added dynamically through a php script. The content is added correctly but the main container div is not expanding. I set the bgcolor of the main div but it shows as only about 2 or 3 pixels high at the top of the page. What am I doing wrong?

The html:

<center>
<div id="main">
<!-- Start of Main Div ****************************************************************************************************** -->

<div id="categories">
      <div id="drop-down-categories">
            <div id="drop-top"></div>
            <div id="drop-mid"><?php echo $div;?></div>
            <div id="drop-bot" onclick="openmenu()"></div>

      </div><!-- End of drop-down-categories Div -->
</div><!-- End of categories Div -->

<div id="cont-main"><!-- Start of cont-main div ***************************************************************************** -->

      <div id="container-left"></div>
      <div id="container-mid"></div>
      <div id="container-right"></div>

</div><!-- End of cont-main div ********************************************************************************************* -->

<div id="bottom-menu">Home | Contact | Terms and Conditions | Privacy | Links</div>

</div><!-- End of Main div ************************************************************************************************** -->
</center>

// and the CSS from both stylesheets (I load two stylesheets)

main.css :

html, body {
      margin:auto;
      }
a:link {
      color:yellow;
}
a:visited {
      color:yellow;
}
a:active {
      color:yellow;
}
#main
{
      width     :950px;
      padding   :5px;
      font      :12pt Arial;
      text-align:left;
  background-color:#234234;
      height    :auto;

}
#bottom-menu
{
background-color  :black;
      color     :gray;
      font      :10pt arial;
      position  :absolute;
      bottom    : 0px;
}


// and categories.css:

#categories
{
      width     :auto;
      height    :auto;
}
#drop-down-categories
{
      position  :relative;
      width     :200px;
      height    :auto;
      float     :left;
}
#drop-top
{
      position  :relative;
      width     :200px;
      height    :48px;
      background:url('../images/cat-top.png');
}
#drop-mid
{
      position  :relative;
      left      :19px;
      top       :0px;
      width     :160px;
      height    :auto;
  background-color:black;

}
#drop-bot
{
      position  :relative;
      top       :-12px;
      width     :200px;
      height    :48px;
      background:url('../images/cat-bot.png');
      cursor    :pointer;
}
#cat
{
      position  :relative;
      top       :-9px;
      width     :160px;
      height    :38px;
      font      :14pt arial;
      color     :#38352b;
      background:url('../images/cat-button.png');
      cursor    :pointer;
      line-height:38px;

}
#cat:hover
{
      background:url('../images/cat-button-on.png');
      color     :#010101;      
}
LVL 20
Mark BradyPrincipal Data EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

koolinCommented:
when you put some content in your DIVs (see code below) all the positioning isn't looking very right.  Your doing a lot of positioning that you probably don't need to be doing and its hard to see what end result your looking for.  Maybe if you could provide an image of what your expecting this to look like, just draw some boxes in Paint or something of what your trying to make.
<center>
        <div id="main">
            <!-- Start of Main Div ****************************************************************************************************** -->
            <div id="categories">
                <div id="drop-down-categories">
                    <div id="drop-top">
                        drop-top
                    </div>
                    <div id="drop-mid">
                        drop-mid</div>
                    <div id="drop-bot" onclick="openmenu()">
                        drop-bot
                    </div>
                </div>
                <!-- End of drop-down-categories Div -->
            </div>
            <!-- End of categories Div -->
            <div id="cont-main">
                <!-- Start of cont-main div ***************************************************************************** -->
                <div id="container-left">
                    container-left
                </div>
                <div id="container-mid">
                    container-mid
                </div>
                <div id="container-right">
                    container-right
                </div>
            </div>
            <!-- End of cont-main div ********************************************************************************************* -->
            <div id="bottom-menu">
                Home | Contact | Terms and Conditions | Privacy | Links</div>
        </div>
        <!-- End of Main div ************************************************************************************************** -->
    </center>

Open in new window

0
Mark BradyPrincipal Data EngineerAuthor Commented:
Ok I have attached a screenshot of what it looks like when I run the code as is. The images make it look right. The layout is ok as it is except the div at the top is only a few pixels high when it should expand to cover all the content inside. As you can see the footer or bottom-menu div is at the bottom as it should be. But the main container should expand to cover the bottom-menu div as well.
Screenshot.png
0
Dave BaldwinFixer of ProblemsCommented:
It doesn't work that way.  Using height:auto; in #main doesn't actually do anything.  That's actually the default.  In addition, #main will only contain other Relatively positioned elements that appear between it's tags.  Making #bottom-menu absolute puts it outside the influence of #main.  If you change #bottom-menu to relative, it will appear at the bottom of #main Content, not at the bottom of the page, even if you change #main to a fixed height.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mark BradyPrincipal Data EngineerAuthor Commented:
Thank you. I changed the positions to relative and they now appear inside the main div tag. Excellent advice !
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.