HTML/CSS problem

**XA04** · 23-08-2006, 01:40 PM

I had a problem with overlapping divs, but basically I figured out it was because in CSS I was using "position:absolute", if I changed that to.. static for example, the div would stop overlapping. However, I need the attribute absolute to make a div stick to the bottom of the page (as a footer).

Any help? (I haven't posted the source as it's getting a bit long.. can provide a screenshot if required)

Cheers

Edit: God I hate it when this happens.. I search for ages.. can't find the answer, so I post a thread.. then a minute later I figure it out.

Using position:relative appears to be working, for now >_<.

Sorry!

**XA04** · 24-08-2006, 01:48 PM

OK.. well I decided to start doing more of the website, and the footer isn't sticking to the bottom now. I haven't changed anything since the last time I used it. The footer div is still set to relative... it doesn't overlap but it won't stick to the bottom. The only attribute that makes it stick is absolute... but I can't use that because it will overlap.

So I'm in the same situation as I was when I started this thread... agh!

Any help is appreicated,
Thanks

**Tomahawk** · 24-08-2006, 02:11 PM

If you post the code I'll have a look for you.. have a few ideas but depends on the current rules you have defined.

**XA04** · 25-08-2006, 10:19 AM

Thanks for the reply.

Screenshot of how it looks on a higher resolution:

Screenshot of how it looks at 1024x768:

CSS:

Code:

html,body
{
height:100%;
min-height:100%;
background-image:url(images/bg.gif);
background-color:#e9f1f4;
background-repeat:repeat-x;
margin:0px;
padding:0px;
}

a:link
{
color:#c50000;
text-decoration:underline;
}

a:visited
{
color:#990000;
text-decoration:underline;
}

a:hover
{
color:#0000FF;
text-decoration:none;
}

.maincontent
{
margin-left:auto;
margin-right:auto;
background-color:#eeeeee;
width:800px;
height:100%; /* Leave in! fixes IE from breaking div */
min-height:100%;
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:0px;
border-style:solid;
}

.content
{width:760px;
margin-left:auto;
margin-right:auto;
}

.mainmenu
{
border-left:0px;
border-right:0px;
border-top:0px;
border-bottom:1px;
border-style:solid;
}

.footer
{
text-align:center;
width:100%;
border-bottom:0px;
border-top:1px;
border-left:0px;
border-right:0px;
border-style:solid;
position:absolute;
bottom:0;
width:800px;
}

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>xxxxxxxxxxx</title>
<?php include('yyyyyy') ?>
</head>

<body>
		<div class="maincontent">
				<?php include('xxxx') ?>
				<!-- Content Start -->
					<div class="content">
						<br>
						
						<h2 align="center">Where am I located?</h2><br><br>
						<p><br><br> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

<b>Map</b><br>
<a href="images/map.gif" target="_blank"><img src="images/map.gif" width="300" height="202" border="0" alt="Map"><br></a>
<i>Map courtesy of <a href="jjj">Google Maps</a></i>

</p>
												
					</div>

				<!-- Content End -->
				<?php include('ooooo') ?>
		</div>
</body>
</html>

HTML for footer too if it helps:

Code:

<div class="footer">
<font size="-1">Copyright &#169; xxxxxx <? echo date('Y') ?><br>
All logos and trademarks on this site are property of their respective owners


</font>
</div>

Thanks,
Adrian

**cougarslam** · 25-08-2006, 10:34 AM

you tried using valign="bottom"

**XA04** · 25-08-2006, 10:46 AM

Yes. Doesn't change anything.

(I presume you meant on the footer)

**Tomahawk** · 25-08-2006, 11:01 AM

So do you want it to stay at the bottom of the browser with the main 'content' section of your site scrolling behind the footer should it exceed the height of the browser window?.. Or do you wish the footer to go with the content and always stay right at the bottom of the page, even if the user has to scroll down to see that footer?

..

**XA04** · 25-08-2006, 11:08 AM

I want the footer to stick to the bottom. If content is larger than the viewers screen then I want them to scroll down.. so they cannot see the footer until they go to the very bottom of the screen.

Cheers,
Adrian

**Tomahawk** · 25-08-2006, 11:30 AM

Ok Adrian, here you go.

This works fine for me in IE/FF and on multiple resolutions.. hope this is what you are after.

Mainly edited the #footer code and added 2% padding to the content to stop it breaking the design on lower resolutions, or if the browser window is resized and made sure the footer wasn't wrapped within the maincontent.

CSS

Code:

html,body
{
height:100%;
min-height:100%;
background-image:url(images/bg.gif);
background-color:#e9f1f4;
background-repeat:repeat-x;
margin:0px;
padding:0px;
}

a:link
{
color:#c50000;
text-decoration:underline;
}

a:visited
{
color:#990000;
text-decoration:underline;
}

a:hover
{
color:#0000FF;
text-decoration:none;
}

.maincontent
{
margin-left:auto;
margin-right:auto;
background-color:#eeeeee;
width:800px;
height: 100%;
min-height:100%;
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:0px;
border-style:solid;
}

.content
{width:760px;
margin-left:auto;
margin-right:auto;
padding-bottom: 2%;
}

.mainmenu
{
border-bottom: 1px solid #000;
}

#footer {
bottom: 0;
background-color: #eee;
color: #000;
width: 800px;
text-align: center;
padding: 0.5% 0%;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0 auto;
}

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>xxxxxxxxxxx</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<?php include('yyyyyy') ?>
</head>

<body>
		<div class="maincontent">
				<?php include('xxxx') ?>
				<!-- Content Start -->
					<div class="content">
						<br>

						<h2 align="center">Where am I located?</h2><br><br>
						<p><br><br> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

<b>Map</b><br>
<a href="images/map.gif" target="_blank"><img src="map.gif" width="300" height="202" border="0" alt="Map"><br></a>
<em>Map courtesy of <a href="jjj">Google Maps</a></em>
</p>
					</div>

				<!-- Content End -->
				<?php include('ooooo') ?>
		</div>
		
		<div id="footer">
<font size="-1">Copyright © xxxxxx <? echo date('Y') ?><br>
All logos and trademarks on this site are property of their respective owners
</font>
</div>
		
</body>
</html>

Hope this helps!

**XA04** · 25-08-2006, 11:57 AM

Hi,
Thanks for helping, but it doesn't really seem to be working.

Pretty self explanitory.. but, it's not sticking to the bottom, and the div breaks when resized. I haven't tested this in IE (want to get it working with at least FF and IE though).

Cheers,
Adrian

**mike_w** · 26-08-2006, 12:33 AM

My advice? Don't bother trying to get a footer to always be at the bottom of the screen. I did, and spent ages looking on the Internet for a decent solution, and couldn't find one. Just make the central div fluid i.e. don't set a height or width, and get the footer div to follow on. Yes, this means that the footer will always be just below the main content, but that's the best you'll probably be able to get. (At least without a lot of effort)

So far as I can see, there are two main approaches to what you want.

1) Stick the footer on the end of the main content, and make sure the main content div fills most of the length of the page. Problems?

min-height:xx% won't work for IE. Even if it did, it's not so nice since it means that when you reduce the window size of the browser, the main content div is now longer than the window.

height:xx% won't work since it'll break the div rendering when the main content div is too long (as you've found out)

2) Deal with the footer directly, and make sure it's always at the bottom of the page

You could try using top:xx% while making the footer div position:absolute, but that suffers from the problems of using percentages e.g. inconsistent application between browsers, changing window size, plus, if memory serves, it doesn't work if the main content div is too long. Essentially, anything that directly tells the footer to be at the bottom of the page is liable to break when the main content div gets too long, meaning that one of the divs will cover the other.

**XA04** · 26-08-2006, 12:35 AM

Fair enough, might be worth getting rid of the footer so I can just get it finished!

Thread: HTML/CSS problem

LinkBack

Thread Tools

HTML/CSS problem

Thread Information

Users Browsing this Thread

Similar Threads

DVI problem, pc won't start! help needed.

Extigy USB problem

Wierd Ati driver problem

Keyboard Problem

Problem with 8KRA2+ mobo and "C1" memory?

Posting Permissions