tarapvny
12-07-2010, 04:20 PM
Help!
The divs extend below the parent container, and I can't seem to fix it. I've tried clearing, but that doesn't seem to work.
See how the "mainContent" div extends below the "Container".
I know the css & html are pretty lengthy, but I would really appreciate your help! Thank you in advance!
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 #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;
}
.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;
height: 500px;
}
.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/appearance2.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 eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<div id="article_main_head"><!-- Empty div for dynamic content -->Loading news. please wait...</div>
<img class="article_img" src="../rotate_home/home_main_img.jpg" width="635" height="335" alt="lotus_main_article" />
<div id="article_main_txt"><!-- Empty div for dynamic content -->Loading news. please wait...</div>
<div id="article_main_pq"><!-- Empty div for dynamic content -->Loading news. please wait...</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('article_main_head','../rotate_article_main/article_main_head.html');
ajax_loadContent('article_main_txt','../rotate_article_main/article_main_txt.html');
ajax_loadContent('article_main_pq','../rotate_article_main/article_main_pq.html');
</script>
</html>
The divs extend below the parent container, and I can't seem to fix it. I've tried clearing, but that doesn't seem to work.
See how the "mainContent" div extends below the "Container".
I know the css & html are pretty lengthy, but I would really appreciate your help! Thank you in advance!
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 #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;
}
.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;
height: 500px;
}
.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/appearance2.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 eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<div id="article_main_head"><!-- Empty div for dynamic content -->Loading news. please wait...</div>
<img class="article_img" src="../rotate_home/home_main_img.jpg" width="635" height="335" alt="lotus_main_article" />
<div id="article_main_txt"><!-- Empty div for dynamic content -->Loading news. please wait...</div>
<div id="article_main_pq"><!-- Empty div for dynamic content -->Loading news. please wait...</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('article_main_head','../rotate_article_main/article_main_head.html');
ajax_loadContent('article_main_txt','../rotate_article_main/article_main_txt.html');
ajax_loadContent('article_main_pq','../rotate_article_main/article_main_pq.html');
</script>
</html>