7 Replies Latest reply on Oct 6, 2014 9:44 AM by Nancy OShea

    Making Auto Height Divs, Maintaining Same Width

    admin Level 2

      Hey on my website I have multiple pages with different heights and I am interested in making two banners, one left and right.

      The Working Code I used is below:

      <div id="left" style="background: url(img/Left.jpg);height: 1500px;width: 150px;float: left;">

      </div>

      <div id="right" style="background: url(img/Right.jpg);height: 1500px;width: 150px;float: right;">

      </div>

       

      This works correctly but with one problem I have to specify the exact height every single time. If I use auto height this only goes for approx. 100px.

      I would like the banners to go non-stop until they reach the footer.

      Thanks for the help.

        • 1. Re: Making Auto Height Divs, Maintaining Same Width
          Jon Fritz II Adobe Community Professional & MVP

          Height is generally not something you set with a pixel amount, it's normally determined by content. If you have floated content within a container, you need to clear the floats in order for the container to completely wrap the content.

           

          One way to do that is to remove the height setting and add an overflow:hidden setting.

           

          If you could provide a link to your malfunctioning page so we could see what's happening in our browsers, I'm sure someone would have the solution you're looking for.

          1 person found this helpful
          • 2. Re: Making Auto Height Divs, Maintaining Same Width
            Nancy OShea Adobe Community Professional & MVP

            You have a stray </section> tag on line 41 in code view.

            Did you clear your floats after nav lists?

             

             

            Nancy O.

            1 person found this helpful
            • 3. Re: Making Auto Height Divs, Maintaining Same Width
              Nancy OShea Adobe Community Professional & MVP

              Nav = navigation (menu) in HTML5.    Your menu lists use CSS floats to sit across the page.  When floats are no longer needed you must clear them to bring the rest of your page content back into the normal document flow.

              HTML5 Introduction

              CSS Float

              http://css-tricks.com/all-about-floats/

               

              I urge you to read up on HTML and CSS basics.  Without a good grasp of coding fundamentals, DW is going to be a very steep learning curve. 

               

              Nancy O.

              1 person found this helpful
              • 4. Re: Making Auto Height Divs, Maintaining Same Width
                Nancy OShea Adobe Community Professional & MVP

                Move the inline styles from your HTML into your style sheet where they belong.

                 

                <div id="left"></div>

                <div id="right"></div>

                 

                CSS:

                 

                #left {

                clear:both;

                background: url(img/Left.jpeg);

                min-height: 610px;

                width: 150px;

                float: left;

                }

                #left {

                background: url(img/Right.jpeg);

                min-height: 610px;

                width: 150px;

                float: right;

                }

                 

                You may need another float-clearing on four-boxes, too.

                 

                Nancy O.

                • 5. Re: Making Auto Height Divs, Maintaining Same Width
                  polar_bare Level 4

                  I think the second #left should be #right. Nancy just had a typo I think. When  you use floats, you have to clear them in the container <div> that contains them. So if you have a container that has both your left and right divs, that container should be cleared.

                  • 6. Re: Making Auto Height Divs, Maintaining Same Width
                    Nancy OShea Adobe Community Professional & MVP

                    With all due respect, there's no legitimate reason for having 2 extra divs for a background. You don't need them.  This could be done a lot simpler with a centered content area <article> and 2 backgrounds on your body selector.  No floats required.

                     

                    <!doctype html>

                    <html>

                    <head>

                    <meta charset="utf-8">

                    <title>HTML5 Document</title>

                    <style>

                    * {

                        margin: 0;

                        padding: 0;

                        -moz-box-sizing: border-box;

                        -webkit-box-sizing: border-box;

                        box-sizing: border-box;

                    }

                     

                    body {

                    background: #069 url(img/Left.jpeg);) top left repeat-y, url(img/Right.jpg) top right repeat-y;

                    }

                     

                    header, footer {

                        clear: both;

                        width: 100%;

                        padding: 0 2%;

                        background: #CCC;

                        color: #000;

                        min-height: 50px

                    }

                    article {

                        clear: both;

                        width: 75%;

                        min-height: 600px;

                        padding: 0 2%;

                        background: #FFF;

                        color: #069;

                        margin: 0 auto;

                    }

                    </style>

                    </head>

                     

                    <body>

                    <header>Header</header>

                    <article>

                    <h1>Main content area</h1>

                     

                    <h3>Heading 3</h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                     

                    <h3>Heading 3</h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                    </article>

                    <footer>Footer</footer>

                    </body>

                    </html>

                     

                     

                    Nancy O.

                    1 person found this helpful
                    • 7. Re: Making Auto Height Divs, Maintaining Same Width
                      Nancy OShea Adobe Community Professional & MVP

                      My example is responsive on any size device (% width).  Yours is not.  Pixels are pixels.  I really don't know what you mean by 1000px in one browser vs another.    If you're experiencing wildly different cross-browser results, it's due to something else -- a flawed design approach and/or errors in your code.

                       

                      Nancy O.

                      1 person found this helpful