CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: Divs extend beyond parent container! Clearing doesn't seem to work!

  1. 12-07-2010, 04:20 PM #1
    tarapvny
    tarapvny is offline New Comer (less than 5 posts)
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Divs extend beyond parent container! Clearing doesn't seem to work!

    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:
    Code:
    @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:
    Code:
    <!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>
    Reply With Quote Reply With Quote
  2. 12-10-2010, 03:32 AM #2
    birdcharm
    birdcharm is offline New Comer (less than 5 posts)
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    In looking at your code, I see that you have an image in your main content, but you're missing the height in css ... pretty sure anyway ... please double check that ... the height will need to be in excess of the height of the image ... I think that may work.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

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

Forum Rules