asked on

CSS Floating DIV trying to Stretch

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;
}

Open in new window

myderrick

Usually to do that I use this technique.

I give the container a fixed height say 800px and then give the leftbar a 100% height.

Sample code below

MD

<!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>
<style type="text/css">
#container { height: 800px; margin: 0 auto; background-color:#000000}
#leftbar { height: 100%; background-color:#CCCCCC; width:200px}
#footer { clear:both; background-color:#6666FF; height:80px; overflow:auto}
#header { clear:both; background-color:#6666FF; height:80px; overflow:auto}
 
</style>
</head>
 
<body>
<div id="header"></div>
<div id="container">
 
<div id="leftbar">This is a left bar going all the way down....</div>
<div id="footer">
fOOTER
</div>
 
 
</div>
 
</body>
</html>

Open in new window

nwilloughby

ASKER

I can see how that works but where would i put my content section as i put a div in next the leftbar and im still getting a gap when that div overflows

nwilloughby

ASKER

<html>
<head>
	<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
  	<div id="container">
 		<div id="leftbar">This is a left bar going all the way down....</div>
		<div id="content">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<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></div>
		<div id="footer">
			fOOTER
		</div>
	</div>
 	
</body>
</html>

Open in new window

nwilloughby

ASKER

#container { height: 800px; margin: 0 auto; background-color:green;}
#leftbar { height: 100%; background-color:#CCCCCC; width:200px; float:left;overflow:auto}
#footer { clear:both; background-color:#6666FF; height:80px; overflow:auto}

Open in new window

SOLUTION

badstyle

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

badstyle

Sorry misunderstood your question!

Try setting display:block; or display:table-column; on leftbar and content.

ASKER CERTIFIED SOLUTION

jasemhi

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

myderrick

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

nwilloughby

ASKER

Thanks guys for your comments, to solve the issue i used a 1px image spanning the length of the left div and content div to create the illusion of the left div overflowing to the footer