2 replies to this topic

[DJM]

Hello all, I am wanting to add a space at the bottom of each page of the site I am doing, in particular the long pages where the font goes all the way to the bottom such as THIS page. I would like to add a space AFTER the table if that makes sense to break it up as I find it annoying to read the font at the bottom of the page the way it is.

I am using a CSS stylesheet so if it could be done there it would be cool, if not I am happy to add a code to each page if need be. I would love a code that works in Mozilla and IE if possible. I am not very literate in HTML/CSS stuff so if anyone is kind enough to respond to this it would be immensely appreciated if you explain it simply.

The code for my stylesheet is as follows:

* {
	margin: 0;
	padding: 0;
}

body {
background: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 17px;
color: #eee;
}

a {
text-decoration: none;
color: #FFE788;
}
a:hover {
text-decoration: none;
color: #eee;
}

#wrap {
margin: 20px auto;
width: 800px;
}

#header {
height: 60px;
line-height: 60px;
}
#header h1 {
color : #fff; 
font-size: 50px;
letter-spacing: -7px;
}

#left {
margin-top: 10px;
float: left;
width: 160px;
font-size: 13px;
padding: 10px;
background: #2F2C2C;
border-left:1px solid #FFE788;
border-right:1px solid #FFE788;
border-top:1px solid #FFE788;
border-bottom:1px solid #FFE788;
}
#left ul {
list-style-type: square;
padding: 5px 0 10px 30px;
color: #FFE788;
}
#left h2 {
font-size: 20px;
font-weight: 100;
letter-spacing: -2px;
padding: 5px 0 5px 0;
}

#right {
margin-top: 10px;
float: right;
width: 580px;
background: #2F2C2C;
text-align: justify;
padding: 10px;
border-left:1px solid #FFE788;
border-right:1px solid #FFE788;
border-top:1px solid #FFE788;
border-bottom:1px solid #FFE788;
}
#right h2 {
font-weight: 100;
letter-spacing: -2px;
font-size: 28px;
padding: 15px 0 10px 0;
}
#right h2 a {
}
#right h2 a:hover {
color: #fff;
text-decoration: none;
}

#footer {
background: #0D0D0D;
font-size: 11px;
text-align: center;
margin-top: 30px;
padding: 5px 0;
}

Notice from rvalkass:

Please remember to use the correct BBCode in your posts. Thanks.

[jlhaslip]

add margin-bottom: 100px; to the 'right' div of your CSS file to see if it does what you expect.

#right {
margin-top: 10px;

margin-bottom: 100px;


float: right;
width: 580px;
background: #2F2C2C;
text-align: justify;
padding: 10px;
border-left:1px solid #FFE788;
border-right:1px solid #FFE788;
border-top:1px solid #FFE788;
border-bottom:1px solid #FFE788;
}

[DJM]

jlhaslip, on 07 June 2010 - 10:27 PM, said:

add margin-bottom: 100px; to the 'right' div of your CSS file to see if it does what you expect.

Excellent! That did work indeed in FF & IE. I thought it would be something very simple and obvious, but obvious things aren't always so obvious for me as I am lacking in HTML/CSS knowledge. Thank you kindly for your great help, I really appreciate it very much.