CODEWITHSUNDEEP
csshtml
Matt Andrzejczuk
Matt Andrzejczuk

Reputation: 2066

can't get a footer to stay at the bottom of a page

The footer on my page at: http://cinicraft.com/site2.0/index.html

should be below the main content window that says "CONTENT" but I can't seem to get it to go right above the footer that says "CiniCraft (c) 2013 All Rights Reserved"

Here's my code in HTML5:

<body>
<div>

<div class="newsBtn">
<h2>News</h2>
</div>

<div class="instaCraftBtn">
<h2>InstaCraft</h2>
</div>

<div class="youTubeBtn">
<h2>YouTube</h2>
</div>

<div class="contactBtn">
<h2>Contact</h2>
</div>

<div class="contentWindow">
CONTENT
</div>

</div>

</body>

<footer>
<div class="dock">
CiniCraft (c) 2013 All Rights Reserved
</div>
</footer>

This is the CSS code for the content and footer:

div.contentWindow
{
float:right;
text-align:center;
background-color: #000000;
width:900px;
height:900px;
padding:1px;
margin:5px;
}


div.dock
{

overflow-y: hidden;
position:relative;
left:-10px;
background-color: black;

padding:1px;
border:5px solid black;
margin-top: 120px;
}

How could I go about getting my footer to stay directly below the content window? thanks

Upvotes: 0

Views: 286

Answers (3)

user2694307
user2694307

Reputation: 383

Give clear:both to the footer.

Upvotes: 1

cssyphus
cssyphus

Reputation: 40096

What you want is called a sticky footer.

This should help:

http://ryanfait.com/sticky-footer/

Also:

css-tricks example
clean sticky footer

Upvotes: 2

Kevin Lynch
Kevin Lynch

Reputation: 24723

It is because you have floated elements. Create a clear div below your contentWindow div.

<div style="clear:both"></div>

Upvotes: 0

Related Questions