asked on

Need help to fix content box not stretching and a sticky footer to bottom

Hello, I just can't seem to find out what is wrong with my content box and why it is not stretching when the content inside it exceeds it's height and I can't figure out how to make a footer stick to the bottom of the page, even when the side pushes further down then the bottom then it should follow to the bottom of the page.

Thanks in advance.

HTML:

<div id="page_container">
    <div id="content_outer">
        <div id="content_inner">
            <div id="content-top">
                <h2>Text Title</h2>
                <span class="clearFix">&nbsp;</span>            </div>
            <div id="col-left">
                <div class="box">
                    <h4 class="yellow">COL1</h4>
                    <div class="box-container">
                    </div>
                </div>
            </div>
            <div id="col-mid">
                <div class="box">
                    <h4 id="SiteName" class="white">
                        COL2
                    </h4>
                    <div class="box-container">
                        <div id="padding">
                            <p>
                        sssssssssssssssss</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>&nbsp;</p>
                            <p>ssssss</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="col-right">
                <div class="box">
                    <h4 class="light-blue">
                        COL3</h4>
                    <div class="box-container">                    </div>
                </div>
            </div>
        </div>
    </div>
        <div id="footer_outer">
            <div id="footer_inner">            </div>
        </div>
</div>

Open in new window

CSS:

body 
{
	font-size: 9pt;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

body, html 
{
	height:100%
}


form {
	height: 100%;
}

#page_container {
	width: 100%;
	height: 100%;
	margin:0px;
	padding:0px;
}


#page_container #content_outer {
	width: 100%;
	background-repeat: repeat-x;
	background-color: #f5f5e7;
	position: relative;
}
#page_container #content_outer #content_inner {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 980px;
	padding-top: 25px;
	padding-bottom: 25px;
	top: 0px;
	left: 0px;
}
#page_container #content_outer #content_inner #content-top 
{
    border-bottom: 1px solid #BCBCB7;
    margin-bottom: 15px;
    padding-bottom: 8px;
    background-color: Transparent;
}
#page_container #footer_outer {
	height: 60px;
	width: 100%;
	border-top: 1px solid #3a5863;
	background-color: #3a4f63;
	margin-bottom: 0px;
	padding: 0px;
}
#page_container #footer_outer #footer_inner {
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 980px;
	margin-top: 0px;
	position: relative;
}

span.clearFix {
	width:100%;
	height:0px;
	visibility:hidden;
	clear:both;
	display:block;
	margin:0;
	padding:0;
	font-size:0px;
}
	
.hidden {
	display:none;
}


/** box general settings **/
div.box 
{
	margin-bottom:15px;
	width:100%;
}
div.box-container
{
	background-color:#fff;
	padding:10px;
	margin:0;
}
div.box-container h5 
{
	color:#333;
	padding-left:20px;
	border-bottom:1px solid #fffff;
	font-weight:bold;
	padding-bottom:7px;
	margin-bottom:1px;
	padding-top: 1px;
}
div.box-container h5 span 
{
	font-weight:normal;
	font-size:0.9em;
}
	
div.box h4 
{
	background:#3a4043;
	text-transform:uppercase;
	font-weight:bold;
	padding:10px;
	margin:0;
}


/** columns **/
#col-left, #col-mid
{
	float:left;
	margin-right:12px;
}
#col-mid
{
	width:510px;
	position: relative;
}
#col-right
{
	margin-right:0px;
	float:right;
}
#col-left, #col-right
{
	width:223px;
	position: relative;
}


/** text colors assigned to elements in various areas **/
.yellow 
{
	color:#e8e4a2;
}
.light-blue 
{
	color:#a6b7c0;
}
.blue 
{
	color:#508db8 !important;
}
.white 
{
	color:#fff;
}

Open in new window

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JoachimPetersen

ASKER

that worked for the footer but what about my content-outer, it is not stretching all the way down to the footer, only the 350px that the content-inner min-height is.

SOLUTION

LZ1