dont want to ask but i got CSS problems :(

unwashed potato! · 19 May 2007 at 11:43

Hate to have to do this but im stuck and im turning to trusty old ocuk to help me out.

bascailly for the design im doing i have the 3 bar layout thing (not sure on the correct name) where i got the header, content, then footer.

Roughly the way its designed is i got a wrapper wrapping the header and content divs putting them in the center of the page and then the footer div.

The trouble im having is that some reason in firefox the wrapper is only the height of the header and not the content even though the content is in the wrapper, which means the footer is starting under the header and not the content.

Heres me css and html if anyone can see why. Im assuming its the use of height: 100% but there is content there so don't really understand whats going on.

html

Code:

<!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=iso-8859-1" />
<title>New 1</title>


<link href="images/favicon.png" rel="shortcut icon" />


<link rel="stylesheet" type="text/css" media="screen" title="default-theme" href="stylesheets/style.css" />



</head>

<body>


<div id="wrapper">

	<div id="header-wrapper">


		<div id="search-wrapper">

<!-- Search Google -->
google ad removed for forum
<!-- Search Google -->

		</div>



		<div id="note-wrapper">

google ad removed for forum

		</div>

		<div id="nav-wrapper"></div>

	</div>
	

	<div id="linkunit-wrapper">

google ad removed for forum

	</div>
	
	<div id="middle-wrapper">

		<div id="rightbar">


			<div class="rightbox-1">
				
				<div class="rightbox-1-content">

					Find out how stuff blah blah

						<a href="#"><div class="button-1"></div></a>

				</div>
				
			</div>

			<div class="rightbox-1"></div>

		</div>

		<div id="content-wrapper">

			<h1>Welcome back</h1>

			<br /><br />

Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah

			<br /><br />

Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah

			<br /><br />

Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah

			<br /><br />

Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah

			<br /><br />

Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah

			<br /><br />

Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah 
Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah Blah blah

		</div>

	</div>

</div>


<div id="footer">

	<div id="footer-wrapper">
		
		<div class="footer-content">
		
			Hello
			
		</div>
		
	</div>
	
</div>


</body>

</html>

css

Code:

/*------------- Styles --------------- */
* {
	padding: 0;
	margin: 0px 0px 0px 0px;
	line-height: 14px;
}

body{
	font: 12px Verdana,"Trebuchet MS", Arial, Helvetica, sans-serif;
	background: #222521 url(images/background/site-bg.jpg);
	background-position:top center;
	background-repeat: repeat-x;
	margin:0px auto 0px auto;
	color:#ffffff;
}

a{
	background-color: transparent;
	color:#ffffff;
	text-decoration: none;
}

a:hover{
	text-decoration:none;
	color: #cab268;
	background: transparent;
}

a.active{
	text-decoration:none;
	color: #cab268;
	background: transparent;
}

/*------- Wrapper --------- */

#wrapper{
	margin:-1px auto;
	width:800px;
	height: 100%;
	border: 2px solid #ffffff;
}

#header-wrapper {
	width: 800px;
	height: 335px;
	background: url(images/background/header.jpg) no-repeat;	
}

#search-wrapper {
	float: right;
	width: 390px;
	height: 35px;
	background: url(images/background/searchbox-bg.png);
	padding: 5px 10px 10px 10px;
	_padding: 5px 10px 5px 10px;
}

#note-wrapper {
	float: left;
	height: 140px;
	padding-top: 33px;
	width: 172px;
	margin-top: 5px;
	margin-left: 35px;
	_margin-left: 18px;
	background: url(images/background/notebox-bg.jpg);	
	text-align: center;
}

#nav-wrapper {
	float: left;
	width: 585px;
	height: 43px;
	background: url(images/background/nav-bg.jpg);
	margin-top: 12px;
}

#linkunit-wrapper {
	width: 468px;
	height: 15px;
	margin: 5px auto;	
}

#middle-wrapper {
	width: 100%;
	height: 100%;
	margin-top: 40px;
	float: left;	
}

#rightbar {
	float: right;
	width: 250px;
	height: 100%;
}

.rightbox-1 {
	width: 240px;
	height: 160px;
	background: url(images/background/right-box-1.jpg) no-repeat;
	color: #2f2f2f;
	font-weight: bold;
}

.rightbox-1-content {
	padding: 55px 50px 20px 20px;
}

.button-1 {
	width: 110px;
	height: 22px;
	float: right;
	margin-top: 10px;
	background: url(images/background/button-1.jpg);
}


#content-wrapper {
	width: 530px;
	float: left;
}


#footer {
	background: url(images/background/footer.jpg) repeat-x;
	height: 150px;

}

#footer-wrapper {
	margin:0px auto 0px auto;
}

.footer-content {
	padding-top: 100px;
	color: #2f2f2f;
}

please excuse some of the silly things in the css, im trying loads of things and not working.

Thanks guys

petergriffin · 19 May 2007 at 14:06

I don't know if I've understood what you're asking. Is this what you want?

<div class="footer" id="wrapper">

<div class="footer-content">

Hello </div>
</div>

</div>

</body>

</html>

Just replace the html that you've got for the footer with the above. The footer will go below the content in both IE & Firefox now.

sugoi · 19 May 2007 at 14:25

put the footer outside the wrapper, and add "clear:both;"

Stellios · 19 May 2007 at 15:05

sugoi said:
put the footer outside the wrapper, and add "clear:both;"

That worked perfectly for me, definately worth a shot

unwashed potato! · 19 May 2007 at 17:36

sugoi said:
put the footer outside the wrapper, and add "clear:both;"

thanks, worked a charm

the footer was alreayd outside the wrapper but adding clear:both worked some reason.

What does that do?

sugoi · 19 May 2007 at 18:43

clears the DIV's above it, that way it will go under all the other DIV's... there's probably a better explanation...