CSS - Bottom Of Page With Div

I'm using CSS to create a gradient, and all is well except for the bottom of the page:

http://www.area51entertainment.co/gradient_problem.png

For some reason it's placing a red bar at the bottom of the gradient. Any ideas why?

http://www.area51entertainment.co/index.php


EDIT: Fixed using the following:

Code:

background-repeat: no-repeat;
background-attachment: fixed;

Hi all,

I am in the early stages of developing a new website and really cant understand why there is a space between the browser window and the container div.

Here is the code I have used:

html, body {
padding: 0;
margin: 0;
background-color: #D3D3D3;
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 14px;
color: #000000;
}

#page-container {
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
background-image:url('back.jpg');
background-repeat:repeat-y;
text-align: center;
width: 800px;
}

I have tried all sorts of variations but nothing will get the page-contaner div to go flush with the top and bottom of the browser window! (I have used this code many times before and it always works, even sites I have stored locally on my machine using this look fine?!?!?)

Any help would be greatly appreciated!

Rich

ok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top.

i am trying to do something like this but my page just gets messed up if i move the links to below.
page layout:
Code:

<div> //overall
   <div>//top>
   <div>side Links/menu
   <div>contents
   <div>footer

I can't seem to work out where the huge space at the bottom of the pages are coming from.

This is the test page
http://midnighttempest.com/layouttest.html

as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off.
Anyone help?

Hello

Trying to position an image at the bottom of my webpage which:

a) will always stay at the bottom of the page regardless of length (page length not window height so the position: fixed is not quite what I'm looking for)
b) will not slide on top or under divs on my page (what position: absolute does) but instead stop moving up once it reaches content above it and the scrollbar appears (as tables do)
c) I can layer divs on top of

so far this is as close as I've got:

in the html

<!-- container for site info -->
<div id="container">

<!-- other content in divs here -->

<!-- other content in divs here -->

<!-- footer for bottom image -->
<div id="footer">

<!-- footer details, who / when / copyright -->
<div id="footerdetails">
details here
</div>
<!-- footer details, who / when / copyright -->

</div>
<!-- footer for bottom image -->

</div>

and in the css

#container
{
position: absolute;
top: 0px;
width: 750px;
height: 100%;
}

#footer
{
position: absolute;
bottom: 0px;
height: 230px;
width: 750px;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

#footerdetails
{
position: relative;
margin: 0px 0px 0px 0px;
padding: 9px 0px 10px 70px;
top: 195px;
width: 680px;
text-align: left;
voice-family: "\"}\"";
voice-family:inherit;
}

I know I'm sort of answering my question above (tables) but I've seen this done with divs, just can't get the right combination of css - anyone have any ideas on this?

Thanks in advnace.

a+
gar

Hi everyone,

It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on...

http://www.karenwilliamson.com/joom2/

I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean.

Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF.

It seems to my novice eyes that it should be controlled by
Code:

table.contentpaneopen

Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers?

Thanks for any input

Rob

Hello everyone

I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6

Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE.

The style sheet is no from me.

I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input

Eva

Here it is:

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png);
background-repeat: no-repeat;
background-position: left top;
font: 13px Verdana, Arial, Helvetica, sans-serif;
/* size: 100%; */
color: #333333;
line-height: 1.3;
margin: 0px;
padding: 0px;
}


img{
border: 0;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
font-weight: bold;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 114%;
color: black;
margin: 0px;
padding: 0px;
}

h2{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h3{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h4{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

table{
padding: 5 px;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masterhead{
padding: 30px 0px 0px 0px;
/* border-bottom: 1px solid #cccccc; */
width: 950px;
}

#navBar{
float: left;
width: 195px;
margin: 0px;
/* 19.08.2008 padding-top: -5px;*/
padding-top: -5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
/* background-color: #e4f2f9; */
/* 19.08.2008 border-right: 1px solid #cccccc; */
}

#headlines{
position: absolute;
left: 690px;
top: 135px;
font-size: 85%!important;
/* font-size: 90%; */
/* float:right; */
width: 230px;
margin-top: -30px;
/* border-left: 1px solid #cccccc; */
/* border-bottom: 1px solid #cccccc;*/
/* padding-right: 10px; */
}

#headlines h3{
margin-top: 3px;
margin-bottom: 3px;
margin-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
font-weight: 900;
}

#content{
float: left;
padding-left: 24px;
width: 460px;
font-size: 107%;
line-height: 1.4;
/* position: absolute;
top: 184px;
left: 210px; */
}

#content h1,h2 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 130%;
font-color: black;
}

#content h3 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 120%;
font-height: 90%;
font-weight: 900;
}


/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 200px;
/* font-size: x-large; */
color: #FF9900;
}


/************* #globalNav styles **************/

#globalNav{
/* border-bottom: 1px solid #CCC; */
color: #006699;
text-align: center;
/* font-weight: bold; */
margin-top: 40px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 10px;
/* 19.08.2008 border-top: 1px solid #cccccc; */
}

#globalNav img{
display: block;
}

#globalNav a {
/* font-size: 120%; */
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

/*
#pageName{
margin: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}
*/

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}


/************** .feature styles ***************/

.feature{
padding: 2px 2px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
color: #006699;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}


/************** .story styles *****************/

.story{
clear: both;
font-size: 80%;
padding-top: -40px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

.story p{
padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
text-align: right;
border-top: 0px none #cccccc;
/* border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc; */

}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}


/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
/* border-bottom: 1px solid #006699; */
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
/* border-top: 1px solid #006699; */
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
/* background-color: #dddddd;*/
}


.navigate {
overflow: hidden;
width: 204px;
padding-bottom: 1px;
}

/**Navigation Menu **/
.navigate ul, .navigate li {
list-style: none;
margin: 0px 0px!important;
padding: 0px 0px!important;
line-height: 1.5em;
}


/**erste Navigationseben**/
.navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
display: block;
border: 0;
border-bottom: 1px solid #86c2e3;
border-top: 1px solid #fff;
border-right: 1px solid #86c2e3;
width: 100%;
text-decoration: none;
margin: 0;
padding: 5px 5px 5px 15px;
font-size: 1.0em;
font-weight: bold;
}

.navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active {
width: auto;
}

.navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px;
padding: 5px 5px 5px 15px;
color: #000;
font-weight: bold;
}

.navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px;
}

.navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}

.navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}


/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

/**Footer**/
#footer {
clear: both;
position: relative;
border-top: 4px solid #CCECF4;
font-size: 11px;
padding: 4px 4px 8px 10px;
margin-top: 4px;
bottom:0;
zoom: 1;
}

#footer .left {
float: left;
width: 700px;
bottom:0;
}

#footer .right {
float: right;
width: 150px;
text-align: right;
margin-top: -2.3em;
zoom: 1;
position: relative;
z-index: 0;
bottom:0;
}

#footer p {
color: #000 !important;
padding: 0;
margin: 0;
bottom:0;
}

#footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active {
color: #306479;
text-decoration: none;
font-weight: bold;
}

#footer a:hover, #footer a:focus {
text-decoration: underline;
}


#navispalte {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 202px;
float: left;
}

I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space.

Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default?

Thanks for any help.

I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column.

Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px;

Here is my HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	height: 100%;
}
.left-col { 
	position: absolute; 
	width: 150px;
	top: 130px; 
	left: 0px;
	padding-left: 3px;
	z-index: 2;
}

.right-col {	
	position: absolute; 
	width: 150px;
	top: 120px;
	right: 0;
	padding-right: 3px;	
	z-index: 1;
	overflow: hidden;
	clear: both;
}

.center-col {
	position: relative;
	min-width: 300px;
	min-height: 100%;
	height: 100%;
	z-index: 3;
	top: 140px;
	margin: 0px 160px 150px 170px;
	text-align: left;
	padding:5px;
}

.heading { 
	position: absolute;
	left: 0px;
	top: 0px;
}

.footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	z-index: 3;
	padding-top: 25px;
	margin: 0px;
	display: block;
}

.footer-bar {
	width: auto;
	padding:10px 3px 3px 0px;
	clear: both;
	background-color: gray;
	vertical-align: bottom;
	text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
	center content<br />
	center content<br />
	center content<br />
	center content<br />
</div>

<div class="left-col">
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
</div>

<div class="right-col">
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
</div>

<div class="heading">
	head content
</div>

<div class="footer">
	<div class="footer-bar">page bottom</div>
</div>
</body>
</html>

Hello, i created a site called knowledgeocity.com and it looks fine in Firefox, but in IE7, there is extra space at the bottom between the logo on the right side and the footer, does anyone know how to fix that? I tried margin bottom, but did not work. thank you

Hi

I'm trying to set an element at the bottom of the page, but I'm having a little bit of problems with this.

I have to following element
Code:

<style>
#footer {
	height: 30px;
	border-top: solid 1px #000000;
	background-color: #eeeeee;
}

</style>


<div id="footer">
	Hello world
</div>

This element should be at the bottom of the page - always. Let's say that the page content's height is 100px. The footer should be placed at the bottom of the page, just above the status bar in the browser.
If the page content is longer than the screen resolution (in other words, you'll have to scroll), then the footer will again be placed at the bottom of the page, BUT it will not be visible untill you scroll down - in other words, it's not a layer that is floating above the status bar.

Do you have any ideas how this could be done?
I tried position: relative; bottom: 30px; but that only placed the footer 30px from the bottom of the content. So if the content ended at 100px, then the footer started at 70px.
Can this be done with css or do I have to use javascript?

- Kimppa

Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page.

my site
stylesheet (see div#footer)

Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work.

Greetings,

My example page is located here.

As you can see I'm having issues on the bottom of the page. I believe I know what is causing the issue, just not how to fix it. I need it only to work in IE and at a resolution of 1024x768 and higher.

I have the footer outside of the other wrappers which are set to 100% height. But wrapper_04, which does not include the header, seems to be extending past the footer the same height as the header because it is trying to be the same height as the other parent wrapper elements?

Any thoughts on how I can fix this using just CSS? I do have some js which sets the height of the content_wrapper so the background image extends the full height (yellow line image on the right of the page), but it should not be affecting the rest of the page.

Thanks in advance for any assistance!

Hi there,

I have an HTML/CSS design I'm working on, that can be accessed he

http://www.design-portal.co.uk/demo/

The CSS can be found he

http://www.design-portal.co.uk/demo/style.css

Basically what I would like is this:

I want another static area that always appears at the bottom of the page underneath the main content text. As I've fixed the big box thing's height (it's going to appear the same height on every page) I want the user to be able to scroll to the next page if the text is too long to fit on the one page. I've created a screenshot as an example:

http://www.design-portal.co.uk/demo/images/demo.jpg

As you can see, the text at the bottom allows the user to scroll forwards and backwards. I can do this, but it never appears at the bottom; always just underneath the text above it depending on how much text is in the place. How can I just get the damn thing to stay at the bottom regardless of how much content is above it?

Cheers in advance,

Dave

Hi all. This is my first time posting ever so please be gentle.

On my website I have background image with stripes and grey.
I want it to go all the way down the bottom of the page.
Currently the background image stops where the content ends.
I have tried height:100%; and that solves the problem, but creates another if the user has a smaller browser window.

Can someone please help me out?

Page URL: leannemarie.com/testing_index.php
CSS: leannemarie.com/css/testing_main.css

Thanks
LeAnne