5 Replies Latest reply on May 12, 2010 3:35 AM by Zabeth69

    Div tag not expanding with content.. Help please!

    philamon

      Hi there,

       

      Firstly I'm reasonably new to this so if I appear stoopid, it's possible that I am.

       

      I have been building a CSS based page with Div tags. What I'm trying to achieve is an html body that has a #wrapper centred on the page, then a #header, #nav, #banner, #content and #footer consecutively down the page. Then inside I want to place a #leftColumn and a #rightColumn. This much I have achieved. What I'm having trouble with is having the content div expand with the two column divs within it. I've included the main.css file I'm using below as well as the source code for the content section of the page. Any help would be greatly appreciated.

       

      Cheers,

       

      Philamon

       

      @charset "UTF-8";

      body {

      color: #FFF;

      text-align: center;

      margin: 0px;

      padding: 0px;

      }

      #wrapper {

      color: #000;

      text-align: left;

      width: 760px;

      margin-top: 0px;

      margin-right: auto;

      margin-bottom: 0px;

      margin-left: auto;

      }

      #header {

      color: #000;

      margin-top: 12px;

      margin-bottom: 12px;

      }

      #content {

      color: #000;

      width: auto;

      margin-top: 0px;

      padding-top: 0px;

      padding-left: 5px;

      overflow: auto;

      }

      #footer {

      color: #000;

      margin-top: 5px;

      margin-bottom: 0px;

      clear: both;

      text-align: center;

      bottom: 0px;

      left: 0px;

      right: 0px;

      position: relative;

      }

      #logo {

      color: #000;

      height: 71px;

      padding-bottom: 10px;

      padding-right: 5px;

      }

      #nav {

      color: #000;

      height: 28px;

      }

      #banner {

      color: #000;

      height: 200px;

      text-align: center;

      }

      #leftColumn {

      color: #000;

      float: left;

      width: 70%;

      padding-right: 5px;

      padding-bottom: 30px;

      padding-left: 5px;

      }

      #rightColumn {

      color: #000;

      float: right;

      width: 20%;

      padding-right: 5px;

      padding-left: 5px;

      padding-bottom: 30px;

      }

      .fltrt {

      float: right;

      }

      <div id="content">
          <h1>Welcome to The Groundswell Division</h1>
          <div id="leftColumn">
            <h2>Mission Statement</h2>
            <p>The Groundswell Division aims to:</p>
            <p>Be involved in the future moulding of the Australian performing arts industry through attracting new audiences, working collaboratively to find new forms and helping to expand the scope of performing arts in Australia.<br />
              Provide vital, diverse and challenging artistic works for audiences, both locally in Melbourne, throughout Australia and internationally.<br />
              Provide a platform for local performing arts practitioners who are currently underutilised within the industry.<br />
              Provide an umbrella for independent artists to stage their works within an established, supportive company.<br />
              Make all decisions regarding creative direction and control in an open, honest forum by the members of the Company’s democratic committee. </p>
          </div>
          <div id="rightColumn">
            <h2>Subheading</h2>
            <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
          </div><div id="leftColumn2">
            <h2> </h2>
      </div>
        </div>

        • 1. Re: Div tag not expanding with content.. Help please!
          Zabeth69 Level 5

          You should be able to get #content to expand by changing overflow: auto; to overflow: hidden; in the #content {...} style.

           

          That may seem counterintuitive, but overflow: auto; will get you scrollbars, not expansion. It might not even get you that, if you don't have a height specified. Overflow: hidden; should make #content stretch to enclose the sidebar divs.

           

          Beth

          • 2. Re: Div tag not expanding with content.. Help please!
            Mooreski

            Hi,

             

            Change your wrapper code to this.

             

             

            #wrapper {

             

            width: 760px;

            margin: 0 auto;

             

            color: #000;

            text-align: left;

            }

             

             

            You haven't included the Wrapper Div in your code :

             

            You haven't specified and CSS markup for leftColumn2.

             

            I have included an example (the div sizes will need adjusting!)

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml">

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

            <title>Untitled Document</title>

            <style type="text/css">

            @charset "UTF-8";

            body {

            color: #FFF;

            text-align: center;

            margin: 0px;

            padding: 0px;

            }

            #wrapper {

            width: 760px;

            margin: 0 auto;

            color: #000;

            text-align: left;

             

            }

            #header {

            color: #000;

            margin-top: 12px;

            margin-bottom: 12px;

            }

            #content {

            color: #000;

            width: 740px;

            margin-top: 0px;

            padding-top: 0px;

            padding-left: 5px;

            overflow: auto;

            }

            #footer {

            color: #000;

            margin-top: 5px;

            margin-bottom: 0px;

            clear: both;

            text-align: center;

            bottom: 0px;

            left: 0px;

            right: 0px;

            position: relative;

            }

            #logo {

            color: #000;

            height: 71px;

            padding-bottom: 10px;

            padding-right: 5px;

            }

            #nav {

            color: #000;

            height: 28px;

            }

            #banner {

            color: #000;

            height: 200px;

            text-align: center;

            }

            #leftColumn {

            color: #000;

            float: left;

            width: 400px;

            padding-right: 5px;

            padding-bottom: 30px;

            padding-left: 5px;

            }

            #leftColumn2 {

            color: #000;

            float: left;

            width: 100px;

            padding-right: 5px;

            padding-bottom: 30px;

            padding-left: 5px;

            }

            #rightColumn {

            color: #000;

            float: left;

            width: 100px;

            padding-right: 5px;

            padding-left: 5px;

            padding-bottom: 30px;

            }

            .fltrt {

            float: right;

            }</style>

            </head>

             

            <body>

            <div id="wrapper">

              <div id="content">

              <h1>Welcome to The Groundswell Division</h1>

                <div id="leftColumn">

                  <h2>Mission Statement</h2>

                    <p>The Groundswell Division aims to:</p>

                    <p>Be involved in the future moulding of the Australian performing arts industry through attracting new audiences, working collaboratively to find new forms and helping to expand the scope of performing arts in Australia.<br />

                    Provide vital, diverse and challenging artistic works for audiences, both locally in Melbourne, throughout Australia and internationally.<br />

                    Provide a platform for local performing arts practitioners who are currently underutilised within the industry.<br />

                    Provide an umbrella for independent artists to stage their works within an established, supportive company.<br />

                    Make all decisions regarding creative direction and control in an open, honest forum by the members of the Company's democratic committee. </p>

                </div>

                <!--/LeftCol-->

             

                <div id="leftColumn2">

                <h2></h2>

                </div>

             

                 <!--/LeftCol2-->

                <div id="rightColumn">

                <h2>Subheading</h2>

                <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>

             

                </div>

                 <!-- /Right Col-->

             

               </div>

                <!-- /Content-->

             

                <div id="footer">

                <h2>Footer</h2>

                </div>

                <!-- /Footer -->

             

            </div>

             

            <!-- /Wrapper -->

            </body>

            </html>

             

             

            Hope this helps ;-)

            1 person found this helpful
            • 3. Re: Div tag not expanding with content.. Help please!
              philamon Level 1

              Thanks Beth,

               

              That did the trick. I had a feeling it was a simple thing I was overlooking, theanks for the help.

               

              Cheers,

               

              Philamon

              • 4. Re: Div tag not expanding with content.. Help please!
                philamon Level 1

                Cheers for the reply Mooreski,

                 

                Very helpful