Help!
I've searched everywhere, and it seems that I tried everything! The div's extend beyond the parent "container" & "mainContent" divs--it's like they're being ignored. I tried clearing the floats, but that doesn't seem to work.
I know my html & css are very lengthy, so I thank you in advance for having patience & helping me!
See how the "mainContent" div extends beyond the "container"
Here is my css:
@charset "UTF-8";
/* CSS Document */
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #FFF;
}
.twoColFixRtHdr #container {
width: 960px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
text-align: left; /* this overrides the text-align: center on the body element. */
font-family: Arial, Helvetica, sans-serif;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
top: 10px;
padding-top: 10px;
clear: both;
}
.twoColFixRtHdr #header {
height: 180px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 0px;
border-bottom-width: 5px;
border-left-width: 0px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #999;
border-bottom-color: #000;
margin-top: 5px;
margin-bottom: 0px;
}
.twoColFixRtHdr #container #sidebar1 img {
padding-top: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
margin-bottom: 0px;
padding-bottom: 10px;
padding-left: 10px;
}
.twoColFixRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixRtHdr #sidebar1 {
width: 315px;
padding: 0px;
top: 200px;
float: right;
}
.twoColFixRtHdr #mainContent {
width: 643px;
padding-top: 10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
overflow: hidden;
top: 230px;
position: absolute;
clear: right;
}
.twoColFixRtHdr #footer {
background:#DDDDDD;
top: 50px;
clear: both;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 20px;
}
.twoColFixRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 0px;
line-height: 0px;
}
.twoColFixRtHdr #container #mainContent #issue_icon {
padding-right: 10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-bottom: 0px;
margin-bottom: 10px;
float: left;
}
.twoColFixRtHdr #container #mainContent #home_main_article {
height: 60px;
width: 540px;
padding-right: 10px;
float: right;
margin-bottom: 10px;
}
.twoColFixRtHdr #container #mainContent #home_main_img {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
width: 630px;
padding-bottom: 10px;
padding-right: 13px;
margin-right: 0px;
clear: both;
float: right;
}
.twoColFixRtHdr #container #mainContent #article_container {
position: relative;
left: 0px;
top: 0px;
clear: right;
}
.twoColFixRtHdr #container #mainContent #article_container .img {
height: 100px;
width: 185px;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article1{
height: 350px;
width: 205px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-top: 10px;
margin-top: 0px;
float: left;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article1 #home_article1_slug{
height: 20px;
padding-right: 10px;
width: 185px;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article1 #home_article1_txt {
height: 145px;
width: 190px;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article2{
height: 360px;
width: 215px;
clear: both;
position: absolute;
left: 205px;
top: 0px;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article2 #home_article2_slug{
height: 15px;
width: 195px;
position: relative;
left: 10px;
padding-top: 10px;
clear: right;
float: left;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article2 #home_article2_img {
padding-right: 5px;
padding-left: 5px;
position: absolute;
left: 5px;
top: 30px;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article2 #home_article2_txt{
position: absolute;
left: 10px;
top: 210px;
height: 145px;
width: 190px;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article3{
border-left-width: 1px;
border-left-style: solid;
border-left-color: #999;
height: 350px;
width: 215px;
margin-top: 0px;
padding-top: 10px;
position: absolute;
left: 425px;
top: 0px;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article3 #home_article3_slug{
width: 190px;
padding-right: 10px;
height: 20px;
padding-left: 10px;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article3 #home_article3_img {
padding-right: 10px;
padding-left: 10px;
}
.twoColFixRtHdr #container #mainContent #article_container #home_article3 #home_article3_txt {
height: 145px;
width: 190px;
padding-left: 10px;
}
.twoColFixRtHdr #container #mainContent #article2_container {
border-top-width: 5px;
border-top-style: solid;
border-top-color: #000;
width: 645px;
clear: both;
left: 0px;
position: relative;
}
.twoColFixRtHdr #container #mainContent #article2_container #issue2_icon {
float: left;
padding-top: 10px;
padding-bottom: 10px;
clear: both;
}
.twoColFixRtHdr #container #mainContent #article2_container #home_article4_txt {
clear: both;
width: 185px;
padding-top: 15px;
float: left;
position: relative;
top: 0px;
}
.twoColFixRtHdr #container #mainContent #article2_container #home_article4_img {
clear: both;
float: right;
}
.spacer { clear: both; }.twoColFixRtHdr #container #mainContent #article_main_head {
font-family: Arial, Helvetica, sans-serif;
top: 10px;
width: 635px;
float: left;
}
.twoColFixRtHdr #container #mainContent #article_img {
width: 630px;
float: left;
margin-top: 10px;
clear: both;
}
.twoColFixRtHdr #container #mainContent #article_main_txt {
float: right;
width: 450px;
clear: both;
padding-top: 10px;
}
.twoColFixRtHdr #container #mainContent #article_main_pq {
clear: both;
float: left;
width: 180px;
margin-top: 100px;
}Here is my html:
<!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>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<link href="css/appearance.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
</head>
<body class="twoColFixRtHdr">
<div id="container">
<img src="images/header/lotuslogo2.png" width="183" height="10" alt="lotus_magazine_tagline" />
<div id="header">
<img class="fltlft" src="images/header/lotuslogo.jpg" width="472" height="84" alt="lotus_magazine_logo" />
<img class="fltrt" src="images/header/cover.jpg" width="222" height="175" alt="lotus_magazine_issue1" />
</div>
<!-- end #header -->
<div id="sidebar1">
<img src="images/nav/nav_subscribe.jpg" width="300" height="66" />
<img src="images/nav/nav_where.buy.jpg" width="302" height="64" />
<img src="images/nav/nav_archive.jpg" width="294" height="81" />
<img src="images/nav/nav_blog.jpg" width="299" height="73" />
<img src="images/nav/nav_lotussite.jpg" width="305" height="72" />
<img src="images/nav/nav_car.jpg" width="273" height="159" />
<p>Donec euus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
</div>
<!-- end #sidebar1 -->
<div id="mainContent">
<img id="issue_icon" src="images/main/issue1_icon.png" width="67" height="60" alt="lotus_magazine_issue1icon" />
<div id="home_main_article"><!-- Empty div for dynamic content -->Loading news. please wait...</div>
<img id="home_main_img" src="rotate_home/home_main_img.jpg" width="635" height="335" alt="lotus_main_article" />
<div id="article_container">
<div id="home_article1">
<div id="home_article1_slug"><!-- Empty div for dynamic content -->Loading, please wait...</div>
<img src="rotate_home/home_article1_img.jpg" width="195" height="175" />
<div id="home_article1_txt"><!-- Empty div for dynamic content -->Loading, please wait...</div>
</div>
<div id="home_article2">
<div id="home_article2_slug"><!-- Empty div for dynamic content -->Loading, please wait...</div>
<img id="home_article2_img" src="rotate_home/home_article2_img.jpg" width="195" height="175" />
<div id="home_article2_txt"><!-- Empty div for dynamic content -->Loading, please wait...</div>
</div>
<div id="home_article3">
<div id="home_article3_slug"><!-- Empty div for dynamic content -->Loading, please wait...</div>
<img id="home_article3_img" src="rotate_home/home_article3_img.jpg" width="195" height="175" />
<div id="home_article3_txt"><!-- Empty div for dynamic content -->Loading, please wait...</div>
</div>
<div id="article2_container" class="clearfix">
<img src="images/main/issue2_icon.png" width="67" height="60" />
</div>
</div>
</div>
<!-- end #mainContent -->
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
<script type="text/javascript">
ajax_loadContent('home_main_article','rotate_home/home_main_article.html');
ajax_loadContent('home_article1_slug','rotate_home/home_article1_slug.html');
ajax_loadContent('home_article1_txt','rotate_home/home_article1_txt.html');
ajax_loadContent('home_article2_slug','rotate_home/home_article2_slug.html');
ajax_loadContent('home_article2_txt','rotate_home/home_article2_txt.html');
ajax_loadContent('home_article3_slug','rotate_home/home_article3_slug.html');
ajax_loadContent('home_article3_txt','rotate_home/home_article3_txt.html');
</script>
</html>