- This topic is empty.
-
AuthorPosts
-
July 3, 2008 at 1:16 am #22879iamawMember
Hi…
Im still fairly new to all of this and I have been lurking around CSS-Tricks for a while now. I was playing around, creating a new layout for one of my sites…
Here is what I have at the moment:
HTML:
Code:
Untitled Document headerLeft
headerRight
contentLeft
contentRight
footerLeft
footerRight
CSS:
Code:@charset “utf-8”;
/* CSS Document */body{
font-family:Arial, Helvetica, sans-serif;
background:#b1d784;
}* {
margin: 0;
padding: 0;
}#mainContainer{
}
#header{
width:100%;
height:30px;
border-bottom:1px dotted black;
background:#91c948;
}#headerLeft{
width:249px;
height:30px;
border-right:1px dotted black;
background:#91c948;
float:left;
}#headerRight{
height:30px;
background:#91c948;
float:left;
}#clearLeft{
clear:left;
}#contentContainer{
width:800px;
}#contentLeft{
width:249px;
height:500px; /* temp */
border-right:1px dotted black;
float:left;
}#contentRight{
width:550px;
height:500px; /* temp */
float:right;
}#clear{
clear:both;
}#footer{
width:100%;
height:100px;
border-top:1px dotted black;
background:#91c948;
}#footerLeft{
width:249px;
height:100px;
border-right:1px dotted black;
background:#91c948;
float:left;
}#footerRight{
height:100px;
width:550px;
background:#91c948;
float:left;
}What is the best way to make my footer stick to the bottom of the page no matter what size the user’s browser window is? Currently it stays put and leaves an empty gap below it. (see the screenshot) Im sure there is a simple way to do it, I just have no clue and would love to learn how :). Hopefully it is possible with the ways I worked my CSS. Thanks in advanced!
[img]http://farm4.static.flickr.com/3271/2633287270_fc39a9356e_o.gif[/img]
July 3, 2008 at 7:56 am #48329ArgeauxParticipantcheck this out:
July 3, 2008 at 2:48 pm #48334iamawMemberAwesome, thanks for that link. It worked for the most part, but I think I have some tweaking to do due to my sloppy CSS code.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.