Container border stops at footer

HTML & CSS
1

As the title states the 1px solid black border on my container ends where the footer starts. I double checked the HTML and the footer is inside the container so tha’ts not the issue. I tried placing a border on the left and right of the footer, but it doesn’t line up right and looks weird. I think the issue is somewhere in here since I copied and pasted from one of my old sites as well as one place online to try to cover all the browser hacks and to make the footer sticky.


html, body {
    height: 100%;
}


body {
    margin: 0;
    padding: 0;
	background-color: #e7d7c5;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, fieldset {
    border: none;
}
iframe{position:absolute;bottom:0}
/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
body:before {/*Opera min-height 100% Fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*eliminate need for inner non clearing element*/
}
#wrapper:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
#container:after { /* #container:after for Float Containment */
    clear:both;
    content:"";
    display:block;
    height:1%;/*fix IE8 min-height:100% bug*/
    font-size:0;
}

*+html body div#_atssh{
position:relative!important;
float:left;
margin-right:-100%;
}

#container {
    width: 960px;
    min-height: 100%;
    margin: 0 auto 0;
    background-image: url(../images/IMG_BG.jpg);
	border: 1px solid black;
	height: auto !important;
	height: 100%;
	margin: 0 auto -232px;
}

.footer, .push {
	height: 232px;
}

* html #container {height:100%;} /*min-height for IE6*/
2

It’s not easy t know what’s happening with a snippet of code like that. Can you post code for a test page that demonstrates the problem, or preferably a live link?

3

www.mverminski.com/test

I only work on this site Mon-Thurs for OT so I wasn’t able to get this posted until now.

Thanks!

4

Hello :). The problem is that hte footer is absolutely placed and as a result, the wrapper doesn’t even know it’s there. Thus it won’t wrap around the footer.

Unless I’m missing something obvious, just remove position:absolute from the footer. Nothing adverse will happen to your design. I don’t know why you had that on there to begin with :).

5

Well I figured it was something easy that I was just overlooking lol. I’m not sure why I had it there either, but that fixed it. Thanks Ryan.

Mike

6

Good to hear :). You’re welcome.