Skip navigation
美味しい
Currently Being Moderated

Auto height DIV within absolute positioned DIV layout

Jun 7, 2012 1:44 AM

Hello,

I'm having trouble understanding how to use the Auto height property on my layout which is built up with absolute positioned DIV IDs with top and left values inside a relatively positioned master/wrapper DIV.

 

I built the entire layout this way, but now, half way down a particular page, I want a DIV that will scale based on the amount of content going inside it. I've tried putting a float:left on all inside it, and tried using overflow:hidden, overflow:auto etc on the WhereDoYouLiveResultsBox in conjunction with height:auto. But the box just disappears to 1px height or something. Is it possible to set this to Auto height so it displays everything inside using this layout?

 

I've never had to use auto height before, and just set Absolute DIVs with height, width, top and left values.

 

Below is the relavant (cut down) HTML and CSS code. Apologies for not uploading the site, but I don't have access to my FTP passwords for temporary hosting from my workplace.

 

<body>

 

<div id="MasterSpecificAdvice">

 

     <div id="WhereDoYouLiveResultsBox" >

    <div id="WhereDoYouLiveResultsTitle">

      <h3>The results based on your search - 4 result(s) found.</h3>

    </div>

    <div id="WhereDoYouLiveSearchResultsArea">

      <table width="818" border="0">

        <tr>

          <td width="348" align="left"><a href="NLC.html">NLC</a></td>

          <td width="10"> </td>

          <td width="10"> </td>

          <td width="434" align="right">Search result description goes here</td>

        </tr>

        <tr>

          <td align="left"><a href="LCC.html">LCC</a></td>

          <td> </td>

          <td> </td>

           <td align="right">Search result description goes here</td>

        </tr>

        <tr>

          <td align="left"><a href="NELC.html">NELC</a></td>

          <td> </td>

          <td> </td>

           <td align="right">Search result description goes here</td>

        </tr>

        <tr>

          <td align="left"><a href="KLaWNBC.html">KLaWNBC</a></td>

          <td> </td>

          <td> </td>

           <td align="right">Search result description goes here</td>

        </tr>

      </table>

 

      <br />

    </div>

  </div>

 

</div>

</body>

</html>

 

=====================================

 

Here is the relevant CSS:

 

#MasterSpecificAdvice {

    height: 1350px;

    width: 854px;

    text-align: center;

    margin-top: 0px;

    margin-right: auto;

    margin-left: auto;

    position: relative;

    top: 0px;

}

#WhereDoYouLiveResultsBox {

    height: 100

&;

    width: 854px;

    position: absolute;

    left: 0px;

    top: 675px;

    background-color: #72befc;

    background-image: url(../searchresultsBG.png);

    background-repeat: no-repeat;

    background-position: 6px 8px;

    height: 250px;

    float: left;

    overflow: auto;

}

 

 

#WhereDoYouLiveResultsTitle {

    /* [disabled]height: 25px; */

    width: 678px;

    position: absolute;

    left: 106px;

    top: 66px;

    text-align: left;

    clear: inherit;

    overflow: visible;

}

#WhereDoYouLiveResultsTitle h3 {

    color: #FFF;

    font-size: 1.3em;

}

 

#WhereDoYouLiveSearchResultsArea {

    /* [disabled]height: auto; */

    width: 818px;

    position: absolute;

    left: 18px;

    top: 100px;

    font-size: 0.95em;

    clear: both;

    overflow: visible;

}

#WhereDoYouLiveSearchResultsArea a:link{

    color: #000;

}

#WhereDoYouLiveSearchResultsArea a:visited{

    color: #000;

 

}

#WhereDoYouLiveSearchResultsArea a:hover{

    color: #CDE8FE;

}

#WhereDoYouLiveSearchResultsArea a:active{

    color: #CDE8FE;

}

#WhereDoYouLiveSearchResultsArea table {

    line-height: 25px;

}

 

I'm sorry for the lengthy post, but I really hope someone can enlighten me as I've been Googling for close to 1 hour now.

Thanks!

 
Replies
  • Currently Being Moderated
    Jun 7, 2012 5:23 AM   in reply to 美味しい

    Your chosen layout method is going to get you into trouble.  Building pages with absolutely positioned content regions is going to lead to unexpected consequences.  I'd prefer to see you get rid of all absolute positioning completely and to rely on the normal flow of the page to locate content on the screen (which is the way that most websites are built).

     

    At any rate,

    I want a DIV that will scale based on the amount of content going inside it.

     

    this is the default behavior of a container.  You need to do nothing to invoke it.  Unless you have assigned an explicit height to a text container (as bad an idea as using absolute positioning for layout), all of them will expand vertically to contain their contents.  If you are seeing some container collapse completely, it's usually because that container contains ONLY floated elements and the float is not cleared before closing the container.  For example:

     

    <div style="border:5px solid red;">

         <p style="float:right;">Now is the time</p>

    </div>

     

    You would expect to see a the words contained in a box with a 5px red border, but you don't.  You see a 10px red 'line' above the words.  That's because the only content within the div is floated (which means it's removed from the normal flow), and the div then behaves as if it has NO content, thereby collapsing to the point where the 5px top and bottom borders merge into a single line.  Now look at this -

     

    <div style="border:5px solid red;overflow:hidden;">

         <p style="float:right;">Now is the time</p>

    </div>

     

    You see what you expected to see.  The words are contained in the box with a 5px red border.  The overflow:hidden style has forced the container div to 'clear' the float, allowing it to 'see' its contents and wrap them as expected.

     

    As a result of your many attempts, your CSS has become cluttered with useless and confusing styles.  For example, you have absolutely positioned the #WhereDoYouLiveResultsBox, and floated it.  But you cannot float an absolutely positioned element because well it's absolutely positioned!  So - if I remove all of the unnecessary styling (including the positioning), I am left with this code - why does that not satisfy your needs?

     

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <style>

    #MasterSpecificAdvice {

              height: 1350px;

              width: 854px;

              text-align: center;

              margin-top: 0px;

              margin-right: auto;

              margin-left: auto;

              position: relative;

              /* [disabled]top: 0px; */

    }

    #WhereDoYouLiveResultsBox {

              /*height: 100

    &;*/

              width: 854px;

              /* [disabled]position: absolute; */

              /* [disabled]left: 0px; */

              /* [disabled]top: 675px; */

              background-color: #72befc;

              background-image: url(../searchresultsBG.png);

              background-repeat: no-repeat;

              background-position: 6px 8px;

              /* [disabled]height: 250px; */

              /* [disabled]float: left; */

              /* [disabled]overflow: hidden; */

    }

     

     

    #WhereDoYouLiveResultsTitle {

              /* [disabled]height: 25px; */

              width: 678px;

              /* [disabled]position: absolute; */

              /* [disabled]left: 106px; */

              /* [disabled]top: 66px; */

              text-align: left;

              /* [disabled]clear: inherit; */

              /* [disabled]overflow: visible; */

    }

    #WhereDoYouLiveResultsTitle h3 {

        color: #FFF;

        font-size: 1.3em;

    }

     

    #WhereDoYouLiveSearchResultsArea {

              /* [disabled]height: auto; */

              width: 818px;

              /* [disabled]position: absolute; */

              /* [disabled]left: 18px; */

              /* [disabled]top: 100px; */

              font-size: 0.95em;

              /* [disabled]clear: both; */

              /* [disabled]overflow: visible; */

    }

    #WhereDoYouLiveSearchResultsArea a:link{

        color: #000;

    }

    #WhereDoYouLiveSearchResultsArea a:visited{

        color: #000;

     

    }

    #WhereDoYouLiveSearchResultsArea a:hover{

        color: #CDE8FE;

    }

    #WhereDoYouLiveSearchResultsArea a:active{

        color: #CDE8FE;

    }

    #WhereDoYouLiveSearchResultsArea table {

        line-height: 25px;

    }

    </style>

    </head>

     

     

    <body>

    <div id="MasterSpecificAdvice">

     

         <div id="WhereDoYouLiveResultsBox" >

        <div id="WhereDoYouLiveResultsTitle">

          <h3>The results based on your search - 4 result(s) found.</h3>

        </div>

        <div id="WhereDoYouLiveSearchResultsArea">

          <table width="818" border="0">

            <tr>

              <td width="348" align="left"><a href="NLC.html">NLC</a></td>

              <td width="10"> </td>

              <td width="10"> </td>

              <td width="434" align="right">Search result description goes here</td>

            </tr>

            <tr>

              <td align="left"><a href="LCC.html">LCC</a></td>

              <td> </td>

              <td> </td>

               <td align="right">Search result description goes here</td>

            </tr>

            <tr>

              <td align="left"><a href="NELC.html">NELC</a></td>

              <td> </td>

              <td> </td>

               <td align="right">Search result description goes here</td>

            </tr>

            <tr>

              <td align="left"><a href="KLaWNBC.html">KLaWNBC</a></td>

              <td> </td>

              <td> </td>

               <td align="right">Search result description goes here</td>

            </tr>

          </table>

     

          <br />

        </div>

      </div>

     

    </div>

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 13, 2012 4:19 AM   in reply to 美味しい

    Good luck.  Absolute positioning is not a suitable page layout method - it is a specialty method. In other words, you would only use it for special things (like, for example a slide rotation scheme).  It's pretty safe to use with images, and deadly to use with text.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 13, 2012 4:27 AM   in reply to 美味しい

    Resolution is immaterial.  A given web page will look identical on all resolutions as long as you hold the browser viewport pixel width constant.  Different size fonts is not the problem either.  The problem occurs when your visitor *needs* to enlarge the font display in their browser to something larger than you have used on the page.  When they do that, your page can quickly become a steaming mass of overlapped content.  That is the problem.  The fact that you haven't encountered this yet simply means that you haven't known to look for it.

     

    Take a look at this essay - http://www.apptools.com/examples/pagelayout101.php.  It's worth a read....

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points