2 replies [Last post]
doodlz
Offline
newbie
Last seen: 7 weeks 4 days ago
Timezone: GMT-7
Joined: 2007-01-18
Posts: 4
Points: 0

I have a container div surrounding a content div. The container div does not stretch to hold the content div and the content div spills out over the container div. I used the clearfix hack and it works fine in all browsers except IE. The url where you can see the problem is: http://tamingthewolf.com/the-book/st-francis-and-the-wolf/.

Here is my html (starts at body tag, I omitted everything except the main div structure as you can see from visiting the url itself):

<body id="interior" class="st-francis-and-the-wolf">
 
<div id="container">
	<div id="inner-container">
 
        <!-- begin header -->
	   <div id="header" class="clearfix">		
	   </div>
	<!-- end header -->
 
<div id="content-container" class="clearfix">
	<div id="content-top">
 
	<!-- begin content -->
		<div id="content">
			<div class="post" id="post-9">		
			   <div class="entry">
			     <p>TEXT...</p>
			   </div>
			</div>
		</div>
	<!-- end content -->
 
	<!-- begin sidebar -->
	<div id="sidebar">	
	</div>
	<!-- end sidebar -->
 
</div><!-- end #content-top -->
</div><!-- end #content-container -->
<div id="content-btm"></div>
 
<!-- begin footer -->
<div id="footer">
	<div id="footer-info">
        </div>
</div>
<!-- end footer -->
 
</div><!-- end #inner-container -->
</div><!-- end #container -->
 
<div id="outer-footer"></div><!-- end #outer-footer -->
 
</body>
</html>

and the css that relates to the problem area:

/* =Layout  --------------------------------------------------------------------*/
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
 
body {
	font-family: Helvetica, Arial, sans-serif; 
	color: #2b181f;
	font-size: 0.9em;
	line-height: 1.5em;
	background: #f9efd2 url('images/body_bg.jpg') 50% 0px no-repeat;
	text-align: center;
	min-width: 940px;
}
#container {
   margin: 0 auto;
   width: 940px;
   text-align: left;
   /*border: 1px solid red;*/
}
#inner-container {
   background: url("images/inner_container_bg.jpg") no-repeat center top;
}
/* =Main Content  ------------------------------------------------------------------*/
div#content-top {
   background: url("images/content_top_bg.jpg") no-repeat center top;
   width: 930px;
   height: 121px;
   /*border: 1px dashed lime;*/
}
div#content-container {
   background: url("images/content_mid_bg.jpg") repeat-y center top;
   width: 930px;
   padding-bottom: 25px;
   margin-top: 15px;
   /*border: 1px solid aqua;*/
}
div#content-btm {
   clear: left;
   background: url("images/content_btm_bg.jpg") no-repeat center top;
   height: 120px;
   width: 930px;
   /*border: 1px dashed blue;*/
}
#content {
   float: left;
   width: 575px;
   margin: 30px 0 0 28px;
   text-align: left;
   display: inline;
   overflow: hidden;
   /*border: 1px solid green;*/
}
 
the following is from ie7 css (i put a border around the divs for troubleshooting):
.clearfix {zoom: 1;}
 
/* =Layout  --------------------------------------------------------------------*/
#container {
   zoom: 1;
   /*border: 1px solid red;*/
}
/* =Main Content  ------------------------------------------------------------------*/
#content {
   float: left;
   position: relative;
   zoom: 1;
   border: 1px solid green;
}
div#content-container {
   min-height: 1000px; 
   height:auto !important;
   zoom: 1; 
   border: 1px solid aqua;
}

Not sure if I'm using clearfix incorrectly or if there is some other bug I'm not aware of. Any help would be greatly appreciated. Please let me know if I omitted any requisite information.

Thanks

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 5 years 44 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Maybe...

What happens if you remove this?

div#content-top {
   background: url("images/content_top_bg.jpg") no-repeat center top;
   width: 930px;
<span style="font-weight:bold">   height: 121px;</span> <-- <--
   /*border: 1px dashed lime;*/
}

doodlz
Offline
newbie
Last seen: 7 weeks 4 days ago
Timezone: GMT-7
Joined: 2007-01-18
Posts: 4
Points: 0

Works in IE, now it's messed up in other browsers...

Thanks for the suggestion! Wow, why does that work? I'm curious.

But, at first, without height, the div#content-top did not render in the other browsers (FF3, Safari) because there wasn't anything pushing it down. So I added this (in case anyone else has this problem):

div#content-top {
   background: url("images/content_top_bg.jpg") no-repeat center top;
   width: 930px;
   <span style="font-weight:bold">display: inline-block;</span> <-- <--
   /*border: 1px dashed lime;*/
}

And it worked!

Thanks again!