Forums

nuodas159

Why the footer isin't in the page bottom? I used clear: both; but not working :/

HTML


<body>
	<div id="one-page">
		
		<div id="header">
		</div>
		
		<div id="menubar">
		</div>
			
		<div id="page-wrapper">
			<div id="desine">
				DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE
				DESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINEDESINE DESINE DESINE DESINE DESINE DESINE DESINE DESINE
			</div>
			
			<div class="kaire">
				KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE
								KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIRE KAIREKAIRE KAIRE
			</div>
		</div>
		
		<div id="footer">
		</div>
	</div>
</body>

CSS


 body {
	background: #0c0d0e;
	color: #e2e2e2;
	font-family: 'Myriad Pro';
	text-align: center;
	font-size: 100%;
	height: 100%;
}

#one-page {
	min-height: 100%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#header {
	background: #fff;
	margin: 0px auto;
	width: 1100px;
	height: 200px;
}

#desine {
	width: 272px;
	float: right;
}

#kaire {
	width: 828px;
	float: left;
}

#page-wrapper {
	width: 1100px;
	margin: 0 auto;
	padding-bottom:208px;
}

#footer {
	position: absolute;
	width: 100%;
   	height: 181px;
	text-align: center;
	background: #fff;
	bottom: 0;
	left: 0;
}

chrisburton

@nuodas159 I changed the header footer backgrounds so you could see how it looks. Of course you can change that to whatever you'd like.

http://jsfiddle.net/WPqr5/

nuodas159

Am why you using reset? and the footer isin't at the page bottom

kgscott284

@nuodas159 the footer is the pink part at the bottom...i added some text to illustrate it a bit more clearly....http://jsfiddle.net/GdqF9/

chrisburton

@nuodas159 Using a reset reduces inconsistencies across browsers.

Thanks @kgscott284

nuodas159

http://www.part.lt/img/8980d580df7162787fa3dc70ade97b2230.bmp

The footer isin't in the bottom of page.
I used bottom: 0; but nothing changed.

chrisburton

@nuodas159 Ah, you're looking for a sticky footer. Perhaps someone else can help you with that. I'm a letterer and have limited knowledge in this area.

nuodas159

I used the sticky footer, but with these float: left or float: right; I mean

<div class="desine">
<div class="kaire">

the footer isin't at the bottom of page.

nuodas159

Sry, for double post this helped me :) http://css-tricks.com/snippets/css/sticky-footer/.
Problem solved.

chrisburton

Don't worry about double posting. Glad you got it worked out.

treehouse : what would you like to learn today?

Forums

[Problem Solved] Sticky footer