Link to home
Start Free TrialLog in
Avatar of nwilloughby
nwilloughby

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

Avatar of myderrick
myderrick
Flag of Ghana image

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

Avatar of nwilloughby
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

<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


#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
Avatar of badstyle
badstyle
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sorry misunderstood your question!

Try setting display:block; or display:table-column; on leftbar and content.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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