...

View Full Version : Container not holding AP Div Content



elfaye11
05-03-2011, 03:53 AM
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>

abduraooft
05-03-2011, 10:02 AM
You shouldn't use absolute positions everywhere as it has many pitfalls (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum