CSS - Content Getting Clipped At Bottom - Please Help!

hi,

I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page.

Here is a link:
http://www.jcstrategies.com/jeff/featured_listings.php


CSS CODE
-----------------------------------------------------------
/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(./images/bg_grad.jpg) fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}


/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 5px 10px 5px 5px;
margin:0px 0px 0px 179px;
border-left: 1px solid #ccd2d2;
}

/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}

#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(./images/glbnav_background.gif);
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
background-image: url(./images/glblnav_selected.gif);
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}


/************** feature styles *****************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
}


/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(./images/bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}


/************* relatedLinks2 styles **************/

.relatedLinks2{
margin: 0px;
padding: 10px 0px 10px 1px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}


/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/




ANY IDEAS????

Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question:

http://www.americanidiotsband.com/

If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it...

Here is a link to the stylesheet that I made up:

http://www.americanidiotsband.com/styles.css

I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!...

Hi all,
this is my first post and hope I get help in a hear-tearing problem that I face at this link: (URL address blocked : See forum rules)

ie show the complete page fine but firefox obscure the bottom content, no need for more explanation since it is obvious from looking at the page, I have the same problem when page content get much long as in the above link.
any help would be greatly appreciated.
sorry for my bad english

Hello,
My first CSS site was going fine; I was learning as I went and drawing from different resources. My code and CSS probably isn't very pretty ( I validated it, I know it needs to be cleaned up) but things were working. Then I went back and made some adjustments concerning the widths of my column divs. Now I find that Firefox is respecting the rightcolumn div (specifically: <div id="contentright">)but IE keeps kicking it to the bottom left. I've tried messing with the column lengths so everything fits accordingly as specified in the frame div width. Can anyone please take a look and offer a suggestion? thanks.
http://www.brinjac.com/test/binnspark.html

Basic, I know. I've probably just been staring at this thing too long. The building image to the right of the navbar displays correctly in Firefox, and has its top clipped off in IE 7 (not caring at this point about 6).

Hmm... I guess I can't post a link.

Crumbs. Well, not sure if its even possible to get help with this thing but maybe describing it with code will make the solution pop to my head.

I'm doing a quick rebuild of palladio-tours .com to sort of bring the code into this millennia. In my first run through using Firefox to check (mistake) I changed the navbar to a horizontal text CSS based <ul> underneath the Palladio Tours <img> with a <br>.

Now, in Firefox this works just fine, but in IE 7 (and 6, but again, not caring at this point), the yellow-ish building to the right of the nav list is clipped off exactly above the upper boundary of the list before it.

Let's see if I can post the relevant code. Html:

html4strict Code:
Original - html4strict Code <div id="header"> <div id="navwrap"> <img id="logo" src="images/logo.gif" alt="Palladio Tours Logo"><br> <ul id="nav"> <li id="t-home"><a href="index.html">home</a></li> <li id="t-company"><a href="company.html">company</a></li> <li id="t-daily"><a href="daily.html">daily</a></li> <li id="t-weekly"><a href="weekly.html">weekly</a></li> <li id="t-brochure"><a href="brochure.html">brochure</a></li> <li id="t-faq"><a href="faq.html">faq</a></li> <li id="t-contact"><a href="mailto:palladio@aol.com"><img src="images/contact.gif" alt="Contact Us"></a></li> </ul> </div> </div>

  

 <div id="header">


 <div id="navwrap">


     <img id="logo" src="images/logo.gif" alt="Palladio Tours Logo"><br>


     <ul id="nav">


     <li id="t-home"><a href="index.html">home</a></li>


     <li id="t-company"><a href="company.html">company</a></li>


     <li id="t-daily"><a href="daily.html">daily</a></li>


     <li id="t-weekly"><a href="weekly.html">weekly</a></li>


     <li id="t-brochure"><a href="brochure.html">brochure</a></li>


     <li id="t-faq"><a href="faq.html">faq</a></li>


     <li id="t-contact"><a href="mailto:palladio@aol.com"><img src="images/contact.gif" alt="Contact Us"></a></li>


     </ul>


 </div>


 </div> 

And the relevant CSS;

css Code:
Original - css Code body { margin: 0px 0px 0px 0px; padding: 0px; border: 0px; background: #ffffff url(images/header-bg.gif) no-repeat top left; font-family: "times", serif; color: #000000; font-size: small; text-align: left; } * html body { font-size: x-small; /* for IE */ f\ont-size: small; /* for IE 6+ */ } #header { text-align: left; } #nav { float: left; list-style: none; margin: 0px 0px 0px 0px; } #nav li { float: left; font-family: "times", serif; font-size: 120%; font-weight: normal; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #nav a { float: left; display: block; text-decoration: none; color: #000000; border: 1px solid #000000; border-left: none; margin: 0px; padding: 0px 4px 0px 4px; } #t-home a { padding: 0px 4px 0px 12px; } #t-faq a { border-right: none; padding: 0px 12px 0px 4px; } #t-contact a { border: none; padding: 0px 0px 0px 0px; } #t-contact a img { border: none; margin: -37px 0px 0px 0px; padding: 0px 0px 0px 0px; background: none; } #nav a:hover { background: #FFCE63; } #nav t-contact a:hover { background: #ffffff; } #navwrap { margin: 0px 0px 0px 0px; padding: 65px 0px 0px 90px; } #logo { margin: 0px 0px 6px 50px; }

  

 body {


     margin: 0px 0px 0px 0px;


     padding: 0px;


     border: 0px;


     background: #ffffff url(images/header-bg.gif) no-repeat top left;


     font-family: "times", serif;


     color: #000000;


     font-size: small;


     text-align: left;


     }


     


 * html body {


     font-size: x-small; /* for IE */


     f\ont-size: small; /* for IE 6+ */


     }


  


 #header {


     text-align: left;


 }


  


 #nav {


     float: left;


     list-style: none;


     margin: 0px 0px 0px 0px;


 }


  


 #nav li {


     float: left;


     font-family: "times", serif;


     font-size: 120%;


     font-weight: normal;


     margin: 0px 0px 0px 0px;


     padding: 0px 0px 0px 0px;


 }


  


 #nav a {


     float: left;


     display: block;


     text-decoration: none;


     color: #000000;


     border: 1px solid #000000;


     border-left: none;


     margin: 0px;


     padding: 0px 4px 0px 4px;


 }


  


 #t-home a {


     padding: 0px 4px 0px 12px;


 }


  


 #t-faq a {


     border-right: none;


     padding: 0px 12px 0px 4px;


 }


  


 #t-contact a {


     border: none;


     padding: 0px 0px 0px 0px;


 }


  


 #t-contact a img {


     border: none;


     margin: -37px 0px 0px 0px;


     padding: 0px 0px 0px 0px;


     background: none;


 }


  


 #nav a:hover {


     background: #FFCE63;


 }


  


 #nav t-contact a:hover {


     background: #ffffff;


 }


  


 #navwrap {


     margin: 0px 0px 0px 0px;


     padding: 65px 0px 0px 90px;


 }


  


 #logo {


     margin: 0px 0px 6px 50px;


 } 

I wish I could post a link to the live example. It's a file called "shell.html" in the "css-test" folder at the above site. My brain obviously has gas, any help with this fart will be appreciated!

Please take a look at this mumbo jumbo example:
Testing page

The objective is to adjust the images of the four round corners of a content rectangle. Now the problem is that the two bottom round corners are not showing properly in Firefox 1.0. They bleed outside the rectangle towards the bottom, with a few pixels. And no matter what I change or try, it won't work.

Second, the corners don't look even close to right in Internet Explorer 6.0.

Do you have any idea how to correct this thing?

Thanks a lot for anyone taking the time to help and give tips.

Hi Guys,

I'm trying to create a footer for a web page. The content displayed will change dynamically from article to article that is posted.

The footer is a simple div that has centered text stating "page posted by $membername on $date"

What I want is if the article is not long enough to push the footer all the way to the bottom, that it would be fixed to the bottom of the screen (not the page).

Is this possible? For instance, someone posts an article that is long enough that you would need to scroll down to see the entire page. The footer would be ok being placed just after the article. But if the article is very short, just like 1 paragraph.. the footer would show halfway up the page.

Ideas?

Hello all

I have an elastic design in which an image clips to the appropriate size via overflow: hidden. Is there any way to control which sides are cropped? What I mean is, can one emulate the background-position property for IMGes with overflow: hidden?

Thanks

Tom

Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings???

Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php
Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php

The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css.

Would anyone be willing to take a look? Thanks in advance.

this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things)

So I have 3 images for the top of my page and 3 images for the bottom.

The page is enclosed in a div frame titled "frame"

each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe"

Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom.

Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame"

I've tried some code in here to do it and it doesn't work..


any help here?

thanks!

Code:

<style type="text/css">
	
	body {
		text-align:center;
		height:100%;
		min-height:100%;
		padding:0px;
		}
	
	#frame {
		width:800px;
		height:100%;
		min-height:100%;
		margin-right:auto;
		margin-left:auto;
		margin-top:0px;
		padding:0px;
		text-align:left;
		position:relative;
		}
		
	#contentlefttop {
		width:155px;
		height:282px;
		padding:0px;
		float:left;
		background-image: url(images/layout_01.gif);
		background-repeat:no-repeat;
		}
	
	#leftframe {
	float:left;
	width:155px;
	position:relative;
	height:100%;
	min-height:100%;
	}
	
	#contentleft {
	clear:left;
	float:left;
	padding:0px;
	width:155px;
	padding-bottom:270px;
	}
	
	#contentleftbottom{
	width:155px;
	height:270px;
	/*clear:left;
	float:left;*/
	padding:0px;
	position:absolute;
	bottom:0;
	background-image: url(images/layout_07.gif);
	background-repeat:no-repeat;
	}
	
	#contentcenter {
		width:486px;
		padding:0px;
		clear:left;
		float:left;
		text-align:center;
		min-height:100%;
		height:100%;
		padding-bottom:53px;
		}
		
	#rightframe {
	float:left;
	position:relative;
	height:100%;
	min-height:100%;
	width:159px;
	}
	
	#centerframe {
	float:left;
	position:relative;
	height:100%;
	width:486px;
	}
	
	#contentrighttop {
		width:159px;
		height:282px;
		padding:0px;
		clear:left;
		float:left;
		background-image:url(images/layout_03.gif);
		background-repeat:no-repeat;
		background-position:top;
		}
		
	#contentright {
	clear:left;
	float:left;
	width:159px;
	padding:0px;
	height:100%;
	padding-bottom:270px;
	}
	
	#contentrightbottom{
	width:159px;
	height:270px;
	/*clear:left;
	float:left;*/
	position:absolute;
	bottom:0;
	padding:0px;
	background-image: url(images/layout_08.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	}
	
	#contentheader {
	width:486px;
	height:135px;
	float:left;
	background-image: url(images/layout_02.gif);
	background-repeat:no-repeat;
		}
		
	#contentfooter {
	/*clear:left;
	float:left;*/
	width:486px;
	height:53px;
	background-image: url(images/layout_09.gif);
	background-repeat:no-repeat;
	position:absolute;
	bottom:0;
	}
	
	#sitemessage {
	margin-left:17px;
	margin-right:31px;
	height:90px;
	text-align:center;
	font-size:12px;
	}
	
	#wisemanquote {
	margin-left:22px;
	margin-right:24px;
	height:85px;
	text-align:center;
	font-size:12px;
	}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#contentheader h1 {
		font-size:14px;
		padding:10px;
		margin:0px;
		}
	
	#contentright p { font-size:10px}
	
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">

<div id="frame">
  	<div id="leftframe">
        <div id="contentlefttop">
        	<div id="sitemessage"></div>
        </div>
        <div id="contentleft">Left</div>
        <div id="contentleftbottom"></div>
    </div>
    <div id="centerframe">
    	<div id="contentheader"></div>
        <div id="contentcenter">
          <p>Center</p>
        </div>
        <div id="contentfooter"></div>
    </div>
    <div id="rightframe">
        <div id="contentrighttop">
        	<div id="wisemanquote"></div>
        </div>
        <div id="contentright">Right</div>
        <div id="contentrightbottom"></div>
    </div>
</div>

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.

Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so:

Code:

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel.

Does anyone know of a way to control the inter-div spacing when "clear" is defined?

Thanks

Ken


---------------------------------------------------------------
Original post
---------------------------------------------------------------
I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems.

The first row renders perfectly but the text of subsequent rows overlaps the text of first row.

Here's the html:
Code:

<div id="contentBlock" class="bodyText">
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">New</div>
	</div>
	<div class='statusDiv'>
		<div class='disclosureCollapsed'></div>
		<div class="disclosureDivLabel">Open</div>
	</div>
</div>

And here's the CSS:
Code:

#contentBlock {
	position: absolute;
	top: 130px;
	left: 200px;
	height: 101%;   /* Hack to force vertical scroll bars */
	right: 280px;
	min-width: 400px;
	visibility: visible;
	display: block;
	}

.statusDiv {
	clear: both
	background-image: url(../png/disclosure_triangles/blue_block.png);
	height: 20px;
	margin-bottom: 1px;
	}

.disclosureCollapsed {
	background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
	display: block;
	text-align: right;
	/*position: absolute;*/
	float: left;
	top: 0px;
	left: 0px;
	width: 18px;
	height: 20px;
	}

.disclosureCollapsed:hover {
	cursor: pointer;
	}

How would I make the text in each subsequent row (statusDiv) line up?

Thanks for any help

Ken

http://www.hybridillusions.com/wordpress/?m=200712

Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like...

http://www.hybridillusions.com/wordpress/

For CSS reference, here is where the css file is located:
http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css

Thanks in advance!