7 Replies Latest reply: Jun 14, 2012 3:30 AM by 美味しい RSS

    Auto height DIV within absolute positioned DIV layout

    美味しい Community Member

      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!

        • 1. Re: Auto height DIV within absolute positioned DIV layout
          MurraySummers ACP/MVPs

          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>

          • 2. Re: Auto height DIV within absolute positioned DIV layout
            美味しい Community Member

            Hi Murray, my apologies, but I never received an email notifying me of a reply to this topic, so I have only just seen it. Thank you for your help. I've been using AP Divs for a while now and I've never come across any problems with them in my designs. However, I now realise the problems they can cause. I've been redoing the layout to work with the flow of the page using relative positioned DIVs and floats (with research and trial and error). Hopefully, it should work better with different resolutions/text sizes as well as accommodating auto height divs (which is what my master/wrapper is set to now and working great!). I suppose you learn something new every day, and today's lesson was an important one. Thanks a lot!

             

            Oh, and yes I know the code was messy. Before posting for help I was trying a few random things based on other advice on this and other forums (messing with floats and clear etc) and never reverted back to the standard AP div code.

             

            And, and one more thing, I actually picked up using AP divs from a Lynda video tutorial. The guy on there tought me about AP divs and positioning them in that method, so that's the method I adopted. Maybe on a later video he explained the negatives associated with these, but I never got to that(!)

            • 3. Re: Auto height DIV within absolute positioned DIV layout
              MurraySummers ACP/MVPs

              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.

              • 4. Re: Auto height DIV within absolute positioned DIV layout
                美味しい Community Member

                Thank you. I guess I just needed someone to tell me that! It's worked perfectly for me so far, but I've never used different sized fonts and resolutions, and I guess my users haven't either, but I'll definitely nip it in the bud now, and try to get used to designing layouts without the aid of the AP div.

                • 5. Re: Auto height DIV within absolute positioned DIV layout
                  MurraySummers ACP/MVPs

                  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....

                  • 6. Re: Auto height DIV within absolute positioned DIV layout
                    美味しい Community Member

                    When I said "different sized fonts", I didn't mean when designing the webpage, I meant using different sized fonts in my browser (enlarging text etc). I already knew that was what causes the overlapping etc.

                    Thanks for the link. I'll have a look through it when I get some time.

                    • 7. Re: Auto height DIV within absolute positioned DIV layout
                      美味しい Community Member

                      Yes, thank you. I read that article. I think I've already come to terms with it now anyway. I have been playing around with my layouts and trying to get them to work without Absolute Positioning and I think I figured every the article says out on my own through trying different things and seeing how it all reacts. I already had basic ideas on relative positioning and floats/clear etc, so it was just a case of trying different selectors until it looked how it did before (with AP divs) and I'm already seeing advantages. So thanks again Murray!