troubleshooting Question

CSS Floating DIV trying to Stretch

Avatar of nwilloughby
nwilloughby asked on
Web Languages and StandardsHTMLCSS
9 Comments3 Solutions1278 ViewsLast Modified:
Hi Experts

Im working on a new website and have finished my photoshop mockup but am having trouble with getting firefox to play nice with my css

You can view my design at  http://cromwellcc.org.uk/new.html

The problem im having is when contentWrapper overflows i want the leftbar to overflow with it  on a standard 100% height both divs fill to the bottom in ie and ff, however once content overflows the black bar in ie overflows too which is the result i want and in ff it doesnt

In the design the left bar has shadow edging which i want to flow all the way to the footer

Live Version of Attached Code: http://cromwellcc.org.uk/newindex.html

Thanks
<html>
<head>
	<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
    
	<div id="wrapper">
		<div id="innerTube">
			<div id="leftBar">
				Left
			</div>
			<div id="ContentWrapper">	
			</br>content</br>content</br>content</br>content</br>content</br>content</br>content</br>content
			</br>content</br>content</br>content</br>content</br>content</br>content</br>content</br>content
			</br>content</br>content</br>content</br>content</br>content</br>content</br>content</br>content
			</br>content</br>content</br>content</br>content</br>content</br>content</br>content</br>content
			</br>content</br>content</br>content</br>content</br>content</br>content</br>content</br>content
			</br>content</br>content</br>content</br>content</br>content</br>content</br>content</br>content
			</div>
		</div>
		<div style="clear:both;"></div>
		<div id="footer"> footer</div>
	 </div>	
</body>
</html>
 
 
body { margin: 0; padding: 0; border: 0; text-align:center;}  
 
div#wrapper{
	width:100%;
	background-color:orange;
}
 
div#innerTube{
	
	height:100%; /*Firefox needs */
	width:1024px;
	background-color:purple;
	margin-left:auto;
	margin-right:auto;
}
 
div#leftBar{
	width:240px;
	background-color:black;
	float:left;
	height:100%;
	overflow:auto;
}
 
div#contentWrapper{
	width:784px;
	background-color:brown;
	float:left;
	min-height:100%;
}
 
div#footer{
	width:1024px;
	height:100px;
	background-color:red;
	margin-left:auto;
	margin-right:auto;
}
ASKER CERTIFIED SOLUTION
jasemhi

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 3 Answers and 9 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 3 Answers and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros