nwilloughby

asked on 3/13/2009

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

Web Languages and StandardsHTMLCSS

Last Comment

nwilloughby

8/22/2022 - Mon

myderrick

3/13/2009

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

3/13/2009

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

3/13/2009

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

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

nwilloughby

3/13/2009

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

3/13/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

badstyle

3/13/2009

Sorry misunderstood your question!

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

ASKER CERTIFIED SOLUTION

jasemhi

3/13/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

SOLUTION

myderrick

3/14/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

nwilloughby

3/14/2009

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

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.