Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Container not holding AP Div Content

    Greetings! I am pulling my hair out and could really use some help on this. I have used AP divs to position content on my site. I have a body background color as well as a container background color - the goal is to separate these visually.

    Problem: The container is not containing all of the content and seems to be independent of it - stretching up and down when resizing window, but the content is not affected.

    I have searched everywhere and have found some supposed "fixes", but nothing is working. Have tried several documented strategies - height 100%, min-height 100%, bottom:0, clear:both, etc. to no avail.

    I am using Dreamweaver CS5. Your help is GREATLY appreciated!!

    Thank you,
    Laura



    CSS CODE (Named ID selectors are the AP Divs used on the page, including static menu items used throughout the site - is this the correct strategy?)


    html {
    height: 100%;
    padding: 0px;
    margin: 0px;
    border: 0px;
    }

    body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 100%;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 990px;
    background-position: center top;
    background-color: #99C;
    height: 100%;
    }
    #container {
    position: relative;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-color: #fff;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    text-align: left;
    }
    #content {
    text-align: left;
    padding: 1em 1em 5em;
    position: relative;
    clear:both;
    }
    #content p {
    padding: 0px;
    }
    #footer {
    position:absolute;
    width:100%;
    bottom:0;
    }

    /*MENU ITEM AP DIVS*/

    #homelogo {
    position: absolute;
    left: 402px;
    top: 19px;
    height: 100%;
    width: 203px;
    }
    #homeribbon {
    position: absolute;
    left: -2px;
    top: 140px;
    height: 78px;
    width: 994px;
    }
    #dottedline {
    position: absolute;
    height: 4px;
    width: 944px;
    left: 23px;
    top: 450px;
    }
    #solution_home {
    position: absolute;
    left: 47px;
    top: 538px;
    height: 226px;
    width: 195px;
    }
    #solution_inside {
    position: absolute;
    left: 47px;
    top: 220px;
    height: 226px;
    width: 195px;
    }
    #company_home {
    position: absolute;
    left: 282px;
    top: 538px;
    height: 226px;
    width: 195px;
    }
    #company_inside {
    position: absolute;
    left: 282px;
    top: 220px;
    height: 226px;
    width: 195px;
    }
    #news_home {
    position: absolute;
    left: 516px;
    top: 538px;
    height: 226px;
    width: 195px;
    }
    #news_inside {
    position: absolute;
    left: 516px;
    top: 220px;
    height: 226px;
    width: 195px;
    }
    #contact_home {
    position: absolute;
    left: 750px;
    top: 538px;
    height: 226px;
    width: 195px;
    }
    #contact_inside {
    position: absolute;
    left: 750px;
    top: 220px;
    height: 226px;
    width: 195px;
    }

    /*SINGLE HTML PAGE AP DIVS*/

    #news_events {
    position: absolute;
    height: 250px;
    width: 431px;
    left: 47px;
    top: 461px;
    }
    #news_blog {
    position: absolute;
    width: 431px;
    left: 47px;
    top: 724px;
    height: 490px;
    }
    #news_newspress {
    position: absolute;
    height: 342px;
    width: 430px;
    left: 516px;
    top: 460px;
    }
    #news_presskit {
    position: absolute;
    height: 105px;
    width: 430px;
    left: 516px;
    top: 822px;
    }
    h1 {
    font-size: 150%;
    font-style: italic;
    color: #49b459;
    font-weight: 100;
    }
    h2 {
    font-size: 170%;
    font-style: normal;
    color: #33663A;
    font-weight: 100;
    }
    li {
    list-style-type: circle;
    font-size: 90%;
    padding-bottom: 5px;
    }
    .menutext {
    font-size: 90%;
    line-height: 145%;
    color: #333;
    }
    .ptext {
    font-size: 95%;
    line-height: 150%;
    color: #333;
    margin-top: -12px;
    }
    .learnmore {
    font-style: italic;
    font-weight: 100;
    color: #47B259;
    }
    .copyright {
    font-size: 75%;
    color: #333;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 25px;
    }


    HTML CODE



    <body>
    <div id="container">
    <div id="content">
    <div id="homelogo"><img src="images/company_logo.png" width="203" height="103" alt="companylogo" /></div>
    <div id="homeribbon"><img src="images/ribbon_wraparound.png" width="994" height="72" alt="tagline" /></div>
    <div id="solution_inside">
    <h1>Solution >></h1>
    <p class="menutext">Sample menu text.</p>
    </div>
    <div id="company_inside">
    <h1>Company >></h1>
    <p class="menutext">Sample menu paragraph.</p>
    </div>
    <div id="news_inside">
    <h1>News >></h1>
    <p class="menutext">See upcoming events, read about us in the press, or obtain a press kit and view our blog.</p>
    </div>
    <div id="contact_inside">
    <h1>Contact >></h1>
    <p class="menutext">Get in touch with us to obtain further information.</p>
    </div>
    <div id="dottedline"><img src="images/dottedline.png" width="944" height="4" alt="dottedline" /></div>
    <div id="news_events">
    <h2>Upcoming Events</h2>
    <p class="ptext">We are either speaking or presenting at these upcoming events:</p>
    <ul>
    <li>Event 1</li>
    <li>Event 2</li>
    </ul>
    </div>
    <div id="news_newspress">
    <h2>News & Press</h2>
    <p class="ptext">Read our latest press releases: <span class="learnmore">View all &gt;&gt;</span></p>
    <ul>
    <li>Article 1</li>
    <li>Article 2</li>
    </ul></div>
    <div id="news_blog">
    <h2>Industry Blog (MBB)</h2>
    <p class="ptext">Stay up-to-date with the industry news.<br />
    <span class="learnmore">Read Our Blog >></span></p>
    <ul>
    <li>Entry 1 </li>
    <li>Entry 2 </li>
    </ul>
    </div>
    <div id="news_presskit">
    <h2>Press Kit</h2>
    <p class="ptext">Download our press kit in PDF format. <span class="learnmore">Click here >></span></p>
    </div>
    <div id="footer">
    <p class="copyright">COPYRIGHT SAMPLE</p>
    </div>
    </div>
    </div>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Container not holding AP Div Content-screen-shot-2011-05-02-10.43.29-pm.jpg  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You shouldn't use absolute positions everywhere as it has many pitfalls.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •