Forums

Tuppers360

Hi there I have a site that I am building in ASP.NET when the page renders it places a form on the page and this is breaking my css to make the footer stick at the bottom of the page this is my code:

/* General */
html, body, form, #wrap
{
    height: 100%;
}
body > #wrap
{
    height: auto;
    min-height: 100%;
}
/* Header */
#headerWrap
{
    background-color: #444444;
}
#header
{
    position: relative;
    width: 80%;
    height: 100px;
    margin: 0 auto;
}
#header #logo
{
    position: absolute;
    top: 18px;
    left: 10px;
    height: 81px;
    width: 67px;
}
#header #logo a
{
    height: 81px;
    width: 67px;
    display: block;
    text-decoration: none;
}
#header #title
{
    margin: 0;
    position: absolute;
    font-size: 3.0em; /*To use if Image is created for header. 	background: url(../images/title.gif) no-repeat; 	text-indent: -999em;*/
}
#navbar
{
    width: 80%;
    margin: 0 auto;
}
#loginpanel 
{
    float:right;
}
/* Content Area Layout*/
#main
{
    width: 80%;
    margin: 0 auto;
    clear: both;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 150px;
}
#content
{
    width: 70%;
    float: left;
    padding: 30px 0 25px 0;
}
#content #list
{
    width: 200px;
    float: left;
}
/* Sidebar */
#sidebar
{
    width: 29%;
    float: right;
    padding: 30px 5px 25px 10px;
}
#sidebar ul
{
    list-style: none;
}
#sidebar img
{
    margin-right: 3px;
}
/* Footer */
#footer
{
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    top: 0px;
    left: 0px;
    background-color: #444444;
}
#footer p
{
    margin: 0 0 15px 0;
}
#foot
{
    width: 80%;
    margin: 0 auto;
    height: 140px;
    line-height: 1.0em;
    padding: 0 10px 0 10px;
}
#foot #left
{
    width: 400px;
    float: left;
    padding-top: 20px;
}
#foot #right
{
    width: 250px;
    float: right;
    text-align: right;
    padding-top: 20px;
}
}
/* CLEAR FIX*/
.clearfix:after
{
    content: \".\";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix
{
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix
{
    height: 1%;
}
.clearfix
{
    display: block;
}
/* End hide from IE-mac */

My HTML code is the following:

<body>
    <div id=\"wrap\">
        <!-- This wrap div needs to encompass everything except the footer div at bottom -->
        <!-- begin header -->
        <div id=\"headerWrap\">
            <div id=\"header\">
                <div id=\"logo\">
                    &nbsp;</div>
                <h1 id=\"title\">
                    </h1>

                <!-- begin login -->
                <div id=\"loginpanel\">
                    
                </div>
                <!-- end login -->
            </div>
            <div id=\"navbar\">
                
            </div>
        </div>
        <!-- end header -->
        <div id=\"main\" class=\"clearfix\">
           <div id=\"content\">

            </div>
            <div id=\"sidebar\">
         
            </div>
        </div>
    </div>
    <div id=\"footer\">
        <div id=\"foot\">
            <div id=\"left\">
               
            </div>
            <div id=\"right\">
                
            </div>
        </div>
    </div>
  
</body>

Now if you run this it works, but if you add a form tag after the body tag (with an end one of course! the css breaks even though I have followed sites like sticky footer and ryan fait!) I cant get it to work now and I have no idea why! Can anyone please suggest anything?

Thanks in anticipation!

Tuppers

I have several other CSS files for styling I am not sure if you would like to see them aswell??? But I have tested with just my css layout style sheet and all is well without the form tag!!

AshtonSanders

That is strange. Do you have a link or screenshots so we can see what you mean by

breaking my css to make the footer stick at the bottom of the page

Tuppers360

I have fixed it now! Not sure exactly what was causing it just started at the begining! and a few hours later its working!

Probably due to clean the code really!

Thanks for looking and if I do find out why it wasnt working I will post the reason!

Cheers

Tuppers

treehouse : what would you like to learn today?

Forums

Problems with FORM from ASP.NET