14 Replies - 958 Views - Last Post: 09 September 2011 - 09:05 PM

#1 RyanSweigert  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 05-September 11

Question about getting a footer to be at bottom of a browser window

Posted 08 September 2011 - 02:58 PM

Hello, I am new here and this is my first post.

I am having a small problem with this: http://ryansweigert.com/blank/

I am wanting it so if the browser windows is taller than the height of the webpage the footer will be at the bottom automatically. At the moment on my screen I see a bank area below the footer because there is nothing pushing it down:

http://www.dropmocks.com/iZQK7

Though I want it to do something like this:

http://www.dropmocks.com/iZSQZ

I have experimented with it a bit but I have really no idea how to do it.

What can I do to make it do what I want?

Here is my sites source:

Index: http://pastebin.com/vGG1vtJZ
CSS: http://pastebin.com/EcYG0pAU

Also I will take any suggestions for my site. I am still learning and all advice is good. :)

Attached File(s)



Is This A Good Question/Topic? 0
  • +

Replies To: Question about getting a footer to be at bottom of a browser window

#2 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Question about getting a footer to be at bottom of a browser window

Posted 08 September 2011 - 03:53 PM

Well, I do suggest that you post the code on site, but I can handle it. What I tend to do is wrap all my HTML in a class that I call main. I also set it's position to relative and it's height (in my case min-height) to 100%. This also brings me to the the next step. You will also need to do:
html, body {
     height: 100%;
}

Now, for your footer, simply set the position to absolute and give it a bottom of 0. If you need me to articulate that as code, then just ask.
Was This Post Helpful? 0
  • +
  • -

#3 RyanSweigert  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 05-September 11

Re: Question about getting a footer to be at bottom of a browser window

Posted 08 September 2011 - 04:29 PM

View PostEnvXOwner, on 08 September 2011 - 03:53 PM, said:

Well, I do suggest that you post the code on site, but I can handle it. What I tend to do is wrap all my HTML in a class that I call main. I also set it's position to relative and it's height (in my case min-height) to 100%. This also brings me to the the next step. You will also need to do:
html, body {
     height: 100%;
}

Now, for your footer, simply set the position to absolute and give it a bottom of 0. If you need me to articulate that as code, then just ask.


Do you mean I do this?:

html, body {
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-image: url('http://ryansweigert.com/images/background.png');
}



Or?:

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-image: url('http://ryansweigert.com/images/background.png');
}


Also I meant I want the footer to be pushed to the bottom of the page if there the windows is larger than the content int he page. I see what you mean though, but the only problem with that would be that it would over lap the other content if the windows size is smaller than the contents height. I will also put everything in a master div. What does min-height: 100% do exactly?

I just found this: http://peterned.home...csslayout1.html
I am not able to get it to work though.
Was This Post Helpful? 0
  • +
  • -

#4 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Question about getting a footer to be at bottom of a browser window

Posted 08 September 2011 - 04:46 PM

Well, I was meaning the first one. min-height is what the minimum height has to be. There's also max-height, which is what the max height has to be. From what I've experienced with the method I use, it does what you want. It'll push it to the bottom and not over lap.
Was This Post Helpful? 0
  • +
  • -

#5 RyanSweigert  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 05-September 11

Re: Question about getting a footer to be at bottom of a browser window

Posted 08 September 2011 - 05:28 PM

View PostEnvXOwner, on 08 September 2011 - 04:46 PM, said:

Well, I was meaning the first one. min-height is what the minimum height has to be. There's also max-height, which is what the max height has to be. From what I've experienced with the method I use, it does what you want. It'll push it to the bottom and not over lap.


I am not quite sure what you mean for the layout, can I have an example please?
Was This Post Helpful? 0
  • +
  • -

#6 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Question about getting a footer to be at bottom of a browser window

Posted 08 September 2011 - 05:41 PM

Well, here is the basic HTML:

<!DOCTYPE html>

<html lang="en">
	<head>
		<link rel="stylesheet" type="text/css" href="thestylesheet" />
	</head>
	
	<body>
		<div class="main">
			<!-- the page content -->
			
			<footer>
				<p>Yo shiz</p>
			</footer>
		</div>
	</body>
</html>


Here is the CSS:
html, body {
	height: 100%;
}

.main {
	min-height: 100%;
	position: relative;
}

footer {
	position: absolute;
	bottom: .5em;
}


I also suggest that you use a CSS reset. I prefer Eric Meyer's.
Was This Post Helpful? 1
  • +
  • -

#7 #define  Icon User is offline

  • Duke of Err
  • member icon

Reputation: 1345
  • View blog
  • Posts: 4,635
  • Joined: 19-February 09

Re: Question about getting a footer to be at bottom of a browser window

Posted 08 September 2011 - 06:00 PM

I changed your code, the left and right footer boxes were of different height.

#footer {
	width: 1000px;
	height: 50px;
	padding: 0px 0 0 0;  /* Changed to 0 */
	margin: 0 auto;
}

#footerleft {
	float: left;
	/* width: 500px; */ /* removed */
	/* height: 50px; */ /* removed */
	margin: 0;
	padding: 65px 0 0 10px;   /* added */
}


#footerright {
	float: right;
	/* width: 500px; */ /* removed */
	/* height: 50px; */ /* removed */
	margin: 0;
	padding: 50px 25px 0 0;  /* added */
}

#footerright p {
	/* margin: 0; */  /*  removed */
	padding: 0;
	color: #ffffff;
	text-align: right;
	font-family: Main;
}


This post has been edited by #define: 09 September 2011 - 08:33 PM

Was This Post Helpful? 0
  • +
  • -

#8 RyanSweigert  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 05-September 11

Re: Question about getting a footer to be at bottom of a browser window

Posted 08 September 2011 - 06:16 PM

View PostEnvXOwner, on 08 September 2011 - 05:41 PM, said:

Well, here is the basic HTML:

<!DOCTYPE html>

<html lang="en">
	<head>
		<link rel="stylesheet" type="text/css" href="thestylesheet" />
	</head>
	
	<body>
		<div class="main">
			<!-- the page content -->
			
			<footer>
				<p>Yo shiz</p>
			</footer>
		</div>
	</body>
</html>


Here is the CSS:
html, body {
	height: 100%;
}

.main {
	min-height: 100%;
	position: relative;
}

footer {
	position: absolute;
	bottom: .5em;
}


I also suggest that you use a CSS reset. I prefer Eric Meyer's.



I think it worked! http://ryansweigert.com/blank/

But if the window size is smaller than the max it still makes the footer overlap. I can probably figure the rest of this out tomorrow after I get some sleep. I am not thinking right at the moment. Thank you. :)

And I will look into this "CSS reset" tomorrow. :)
Was This Post Helpful? 0
  • +
  • -

#9 RyanSweigert  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 05-September 11

Re: Question about getting a footer to be at bottom of a browser window

Posted 09 September 2011 - 04:59 PM

View PostEnvXOwner, on 08 September 2011 - 05:41 PM, said:

Well, here is the basic HTML:

<!DOCTYPE html>

<html lang="en">
	<head>
		<link rel="stylesheet" type="text/css" href="thestylesheet" />
	</head>
	
	<body>
		<div class="main">
			<!-- the page content -->
			
			<footer>
				<p>Yo shiz</p>
			</footer>
		</div>
	</body>
</html>


Here is the CSS:
html, body {
	height: 100%;
}

.main {
	min-height: 100%;
	position: relative;
}

footer {
	position: absolute;
	bottom: .5em;
}


I also suggest that you use a CSS reset. I prefer Eric Meyer's.


I experimented around with the code more. It works if the page is too small for the window, which is what I want. But I am not able to get it to stop overlapping if the windows size is too small. Any ideas? Did I do something wrong? Here is my updated code:

HTML: http://pastebin.com/XPd54ahX
CSS: http://pastebin.com/NpJzBtGb

Edit: It seems like it is ignoring #contentwrap, I forgot to say that.

This post has been edited by RyanSweigert: 09 September 2011 - 05:02 PM

Was This Post Helpful? 0
  • +
  • -

#10 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Question about getting a footer to be at bottom of a browser window

Posted 09 September 2011 - 05:09 PM

Can you take a snapshot of your problem? Also, you can post your code in the code tags. You don't have to use pastebin.
Was This Post Helpful? 0
  • +
  • -

#11 RyanSweigert  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 05-September 11

Re: Question about getting a footer to be at bottom of a browser window

Posted 09 September 2011 - 05:16 PM

View PostEnvXOwner, on 09 September 2011 - 05:09 PM, said:

Can you take a snapshot of your problem? Also, you can post your code in the code tags. You don't have to use pastebin.


Here is it working when the window size is higher:
http://www.dropmocks.com/iZU7O

And here is it when it is smaller. Edit: When it is smaller it only overlaps about 100px though and stops.
http://www.dropmocks.com/iZUsd

HTML:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Ryan Sweigert</title>
		<link rel="stylesheet" type="text/css" href="http://ryansweigert.com/blank/style.css" />
		<!--[if IE]>  
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
			<script src="http://ryansweigert.com/ie.js"></script>  
		<![endif]--> 
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"></script>
		<script src="http://www.ryansweigert.com/konamiload.js"></script> 
		<script src="https://apis.google.com/js/plusone.js"></script>
		<meta name="description" content="Ryan Sweigerts website. All this things about him in one place." />
		<meta name="keywords" content="Ryan Sweigert, Geek" />
		<meta charset="utf-8" />
	</head>
	<body>
		<div id="wrapper">
			<div id="topwrap">
				<div id="headerwrap">
					<header>
							<a href="http://www.ryansweigert.com/">Ryan Sweigert</a>
					</header>
					<nav>
						<ul>
							<li><a href="http://ryansweigert.com">Home</a></li>
							<li><a href="http://ryansweigert.com/aboutme">About Me</a></li>
							<li><a href="http://www.districtlines.com/RyanSweigert1">Store</a></li>
							<li><a href="http://ryansweigert.com/irc">IRC</a></li>
							<li><a href="http://ryansweigert.com/live">Live</a></li>
							</ul>			
					</nav>
				</div>
			</div>
			<div id="contentwrap">
				<content>		
				</content>
			</div>
			<div id="footerwrap">
				<footer>
					<div id="footerleft">
						<iframe src="http://www.facebook.com/plugins/like.php?app_id=223306654371814&amp;href=http%3A%2F%2Fryansweigert.com&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>			<a align="left" href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="RyanSweigert">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><g:plusone size="medium"></g:plusone>
					</div>
					<div id="footerright">
						<p>Copyright &copy; 2011 Ryan Sweigert</p>
					</div>
				</footer>
			</div>
		</div>
	</body>
</html>



CSS:
@font-face {
	font-family: Main;
	src: url('http://ryansweigert.com/fonts/Sansation_Regular.ttf');
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-image: url('http://ryansweigert.com/images/background.png');
}

#wrapper {
	min-height: 100%;
	position: relative;
}

#topwrap {
	width: 100%;
	height: 100px;
	margin: 0 auto;
	background-image: url('http://ryansweigert.com/images/divbackground.png');
	-moz-box-shadow: 0px 5px 10px #A8A8A8;
	-webkit-box-shadow: 0px 5px 10px #A8A8A8;
	box-shadow: 0px 5px 10px #A8A8A8;
}

#headerwrap {
	width: 1000px;
	height: 100px;
	margin: 0 auto;
}

header {
	float: left;
	margin: 20px 0 0 0;
}

header a:link {
	margin: 0;
	padding: 0;
	font-family: Main;
	font-size: 50px;
	color: #ffffff;
	text-decoration: none;
	text-shadow: 0px 0px 20px #000000;
}

header a:visited {
	font-family: Main;
	color: #ffffff;
	text-decoration: none;
}

header a:hover {
	font-family: Main;
	color: #ffffff;
	text-decoration: none;
}

nav {
	float: right;
	margin: 30px 0 0 0;
	text-align: center;
	line-height: 40px;
}

nav ul {
	height: 40px;
	margin: 0;
	list-style: none;
}

nav li {
	float: left;
	margin: 0 0 0 10px;
	background-color: #ffffff;
	border-style: solid;
	border: 0px solid #A8A8A8;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 1px 5px #A8A8A8;
	-webkit-box-shadow: 0px 1px 5px #A8A8A8;
	box-shadow: 0px 1px 5px #A8A8A8;
}

nav li a {
	height: 40px;
	padding: 0 20px;
	display: inline-block;
	color: #000000;
	font-family: Main;
	text-decoration: none;

}

nav li a:hover {
	background: #C6CCD0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	border-radius: 5px;
}

#contentwrap {
	width: 1000px;
	height: 500px;
	margin: 20px auto 0 auto;
	background-image: url('http://ryansweigert.com/images/website/divtile.png'); 
	border-style:solid;
	border:1px solid #A8A8A8;
	-moz-box-shadow: 0px 1px 10px #A8A8A8;
	-webkit-box-shadow: 0px 1px 10px #A8A8A8;
	box-shadow: 0px 1px 10px #A8A8A8;
}

content {
	float: left;
	width: 1000px;
	height: 490px;
	padding: 5px;
}

#footerwrap {
	width: 100%;
	height: 100px;
	margin: 0 auto 0 auto;
	position: absolute;
	bottom: 0;
	background-image: url('http://ryansweigert.com/images/divbackground.png');
	-moz-box-shadow: 0px -5px 10px #A8A8A8;
	-webkit-box-shadow: 0px -5px 10px #A8A8A8;
	box-shadow: 0px -5px 10px #A8A8A8;
}

footer {
	width: 1000px;
	height: 55px;
	padding: 45px 0 0 0;
	margin: 0 auto;
}

#footerleft {
	float: left;
	width: 500px;
	height: 50px;
	margin: 0;
}

#footerright {
	float: right;
	width: 500px;
	height: 50px;
	margin: 0;
}

#footerright p {
	margin: 0;
	padding: 0;
	color: #ffffff;
	text-align: right;
	font-family: Main;
	text-shadow: 0px 0px 10px #000000;
}


This post has been edited by RyanSweigert: 09 September 2011 - 05:18 PM

Was This Post Helpful? 0
  • +
  • -

#12 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Question about getting a footer to be at bottom of a browser window

Posted 09 September 2011 - 05:31 PM

Try setting a max-height? Try playing around with your current heights for other elements.
Was This Post Helpful? 0
  • +
  • -

#13 RyanSweigert  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 05-September 11

Re: Question about getting a footer to be at bottom of a browser window

Posted 09 September 2011 - 05:37 PM

View PostEnvXOwner, on 09 September 2011 - 05:31 PM, said:

Try setting a max-height? Try playing around with your current heights for other elements.


I already tried that. I am completely confused at this point. D:
Was This Post Helpful? 0
  • +
  • -

#14 #define  Icon User is offline

  • Duke of Err
  • member icon

Reputation: 1345
  • View blog
  • Posts: 4,635
  • Joined: 19-February 09

Re: Question about getting a footer to be at bottom of a browser window

Posted 09 September 2011 - 08:47 PM

Using borders round the elements can help when designing and positioning.

        border: thin solid yellow;



The paragraph tag will add a line below the text.
Was This Post Helpful? 1
  • +
  • -

#15 RyanSweigert  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 05-September 11

Re: Question about getting a footer to be at bottom of a browser window

Posted 09 September 2011 - 09:05 PM

View Post#define, on 09 September 2011 - 08:47 PM, said:

Using borders round the elements can help when designing and positioning.

        border: thin solid yellow;



The paragraph tag will add a line below the text.


Thank you for the advice. :) I might start using it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1