Jump to content

CSS issue with footer

zimmo

By zimmo
in CSS Help

 Share

Recommended Posts

zimmo Regular Member

zimmo

Posted
Posted

I am getting better with css but this issue is driving me mad, i have a nice simple layout, and have the footer so its always where it should be. But as soon as i try and have a two column layout in the middle it stops the footer being where it should and is only positioned in the actual window so when you scroll it does not stay at the footer.

 

Here is the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site</title>
<link rel="stylesheet" type="text/css" href="../html/driving.css" />
</head>
<body>

<div id="container">

<!-- Header Starts Here -->
	<div id="header">
		<img src="../html/images/logo.gif" width="480" height="180" alt="Crafty Cakes" style="vertical-align:top"/> 
	</div>


<!-- Content Holder Starts Here -->
	<div id="content">
		<div class="left">
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
		</div>
		<div class="right">
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
						<p>Content</p>
		</div>
	</div>

<!-- Footer Spacer Here -->
	<div id="spacer">		</div>

<!-- Footer Starts Here -->
	<div id="footercontainer">
		<div class="footer">
		<ul>
				<li><a href="#">Link</a></li>
		</ul>
			<p><a href="#">Terms and Conditions</a></p>
		</div>
	</div>


</div>

</body>
</html>

 

And here is the css:

/* CSS Style sheet  */

html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */

font-family:arial,sans-serif;
font-size:small;
color:#666;
}

h1 { 
font:1.5em georgia,serif; 
margin:0.5em 0;
}

h2 {
font:1.25em georgia,serif; 
margin:0 0 0.5em;
}
h1, h2, a {
	color:orange;
}

p { 
line-height:1.5; 
margin:0 0 1em;
}

div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
background-color: #ffffff;
background-image: url(inc/mainbackground.gif);
background-repeat: repeat-x;
background-position: center top;

height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/

min-height:100%; /* real browsers */
}

div#header {
position:relative; /* needed for footer positioning*/
width:1024px;
height: 230px;
margin:0 auto; /* center, not in IE5 */
}
div#header p {
	font-style:italic;
	font-size:1.1em;
	margin:0;
}

div#content {
position:relative; /* needed for footer positioning*/
width:1024px;
margin:0 auto; /* center, not in IE5 */
padding:1em 1em 5em; /* bottom padding for footer */
height:100%;
}
div#content p {
	text-align:justify;
	padding:0 1em;
}

.left {
position:relative; /* needed for footer positioning*/
width: 200px;
float: left;
}
.right {
position:relative; /* needed for footer positioning*/
width: 700px;
float: right;

}

/* FOOTER */

div#footercontainer {
position:absolute;
width:100%;
height: 100px;
bottom:0; /* stick to bottom */
background-image: url(inc/footercontainer.gif);
background-repeat: repeat-x;
background-position: left top;
}

.footer {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:1024px;
height: 100px;
font: 12px Lucida Grande, Tahoma, sans-serif;
color: #ffffff;
background-image: url(inc/footer.gif);
background-repeat: no-repeat;
background-position: center top;
}

.footer ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 40px;
}
.footer li {
display: inline;
margin: 0px;
margin: 0;
padding: 10px 10px 0px 10px;
}
.footer li a {
text-decoration: none;
color: #ffffff;
}
.footer li a:hover {
color: #000000;
}
.footer p {
padding: 0px 10px 0px 10px;
}
.footer p a {
text-decoration: none;
color: #ffffff;
}
.footer p a:hover {
color: #000000;
}
/* END footer */

 

I have tried all sorts, but it just will not work. The content div holds these columns as div classes. If I take the classes out and have the content div for content it works fine.

 

Someone said the following to me:

"I copied your code into dreamweaver and had a look. I notice both your div's you're floating, left and right. When you float and element it is removed from the document flow and doesn't take up any space, and because of that, doesn't force the footer down to where you would probably like it.

 

In a situation like this I would only float the smaller div, and position relative the other one where I want it.

 

Does this help/make sence?"

 

But I am not sure which to change?

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

You have to move it out of #container. Absolutely positioned elements are positioned absolutely within the first parent element that has relative or absolute positioning. If none exist (default), they are positioned absolutely to the body. But in your case, #container is positioned relatively.

Link to comment
Share on other sites
zimmo Regular Member

zimmo

Posted
  • Author
Posted

Sorry I am not an expert in css, still on the learning curve.

 

So if I place this outside of the container:

<div class="left">

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

<p>Content</p>

</div>

 

And would I change the css to be absolute positioning? or just to float?

Link to comment
Share on other sites
zimmo Regular Member

zimmo

Posted
  • Author
Posted

Sorry I thought you was referring to what I had been told. How can I now position the footer then, if I take it out of the container, it is positioned at the foot of the viewable screen and when you scroll it stays there.

Link to comment
Share on other sites
zimmo Regular Member

zimmo

Posted
  • Author
Posted

Here is my code now:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Site</title>
   <link rel="stylesheet" type="text/css" href="../html/driving2.css" />
</head>
<body>

   <div id="container">

<!-- Header Starts Here -->
      <div id="header">
         <img src="../html/images/logo.gif" width="480" height="180" alt="Crafty Cakes" style="vertical-align:top"/>
      </div>


<!-- Content Holder Starts Here -->
      <div id="content">
         <div class="left">
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
         </div>
         <div class="right">
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
                     <p>Content</p>
         </div>
      </div>

   </div>

<!-- Footer Spacer Here -->
      <div id="spacer">      </div>

<!-- Footer Starts Here -->
      <div id="footercontainer">
         <div class="footer">
         <ul>
             <li><a href="#">Link</a></li>
         </ul>
            <p><a href="#">Terms and Conditions</a></p>
         </div>
      </div>


</body>
</html>

 

CSS

/* CSS Style sheet  */

html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */

font-family:arial,sans-serif;
font-size:small;
color:#666;
}

h1 { 
font:1.5em georgia,serif; 
margin:0.5em 0;
}

h2 {
font:1.25em georgia,serif; 
margin:0 0 0.5em;
}
h1, h2, a {
	color:orange;
}

p { 
line-height:1.5; 
margin:0 0 1em;
}

div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:100%;
background-color: #000000;
background-image: url(inc/mainbackground.gif);
background-repeat: repeat-x;
background-position: center top;

height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/

min-height:100%; /* real browsers */
}

div#header {
position:relative; /* needed for footer positioning*/
width:1024px;
height: 230px;
margin:0 auto; /* center, not in IE5 */
}
div#header p {
	font-style:italic;
	font-size:1.1em;
	margin:0;
}

div#content {
position:relative; /* needed for footer positioning*/
width:1024px;
margin:0 auto; /* center, not in IE5 */
padding:1em 1em 5em; /* bottom padding for footer */
height:100%;
}
div#content p {
	text-align:justify;
	padding:0 1em;
}

.left {
position:relative; /* needed for footer positioning*/
width: 200px;
float: left;
}
.right {
position:relative; /* needed for footer positioning*/
width: 700px;
float: right;

}

/* FOOTER */

div#footercontainer {
position:absolute;
width:100%;
height: 100px;
bottom:0; /* stick to bottom */
background-image: url(inc/footercontainer.gif);
background-repeat: repeat-x;
background-position: left top;
}

.footer {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:1024px;
height: 100px;
font: 12px Lucida Grande, Tahoma, sans-serif;
color: #ffffff;
background-image: url(inc/footer.gif);
background-repeat: no-repeat;
background-position: center top;
}

.footer ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 40px;
}
.footer li {
display: inline;
margin: 0px;
margin: 0;
padding: 10px 10px 0px 10px;
}
.footer li a {
text-decoration: none;
color: #ffffff;
}
.footer li a:hover {
color: #000000;
}
.footer p {
padding: 0px 10px 0px 10px;
}
.footer p a {
text-decoration: none;
color: #ffffff;
}
.footer p a:hover {
color: #000000;
}
/* END footer */

 

The footer with code above is showing viewport only.

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.