HELP! divs outside of parent container--clearing doesn't seem to work

Question

tarapvny 0 Newbie Poster

13 Years Ago

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>

web-design

Edited 13 Years Ago by tarapvny because: n/a

2 Contributors
1 Reply
163 Views
6 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Arkinder

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Arkinder 93 Posting Pro in Training · Answer 1 · 2010-12-07T23:03:49+00:00

Where else is the content supposed to go? Make your content smaller to fit within whatever container you have.

Regards, Arkinder