[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 588
  • Last Modified:

<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;      
}
0
Mark Brady
Asked:
Mark Brady
  • 2
1 Solution
 
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
 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now