Footer doesnt move down with content

AlexW · February 11th, 2011, 11:27 AM

Wonder if someone can help, I'm using CSS to format content and footer Div's but when the content placeholder becomes bigger, the footer Div doesnt move down with it, instead it stays put over the content.

This is what I have in the CSS:
#MainContent
{
width: 630px;
height: 500px;
float: left;
}

#Footer
{
width: 990px;
height: 50px;
text-align: center;
font-size: x-small;
float:right;
}

In the master page all I've done is listed the content and footer Div's and let the CSS format the sizes and locations...

Imar · February 11th, 2011, 01:15 PM

Hi Alex,

As I hinted in my other post, you need to provide the HTML used for this page, and add an explanation about what you're trying to accomplish. With this CSS alone, it's impossible to see what the problem is, let alone provide you with a solution.

Cheers,

Imar

AlexW · February 11th, 2011, 04:01 PM

Hi Imar, what I want to happen is for the Footer Div to move down when the content in the content place holder (comtained in the MainContent Div) grows larger than the space already provided by the #MainContent Height CSS property.

Below is my MainContent and Footer Divs stored on my Site.Master page, the footer appears correctly at the bottom as I set them to float left in the CSS, but the Footer Div doesnt move down when the content grows longer than the 500px.

<div id="MainContent" style="background-image: url(Images/PageImages/Back.jpg);">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana" Font-Size="0.8em" PathSeparator=" : ">
<CurrentNodeStyle ForeColor="#333333" />
<NodeStyle Font-Bold="True" ForeColor="#284E98" />
<PathSeparatorStyle Font-Bold="True" ForeColor="#507CD1" />
<RootNodeStyle Font-Bold="True" ForeColor="#507CD1" />
</asp:SiteMapPath>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>

<div id="Footer" style="background-image: url(Images/PageImages/Footer.jpg);"><hr /><br /></div>

Imar · February 12th, 2011, 05:46 AM

Aren't you asking for that explicitly by setting a height on the main content? What do you need the height for if you want it to grow? I think all you need is a min-height:

Code:

 
#MainContent
{
  width: 630px;
  min-height: 500px;
}
    
#Footer
{
  width: 990px;
  height: 50px;
  text-align: center;
  font-size: x-small;
}

Hope this helps,

Imar

AlexW · February 13th, 2011, 11:28 AM

That worked well thanks, I also had to keep float: left; in the footer div but not sure why.

One question, I have a menu and right sidebar that don't continue down with the content Div and so blank space appears below. Is there any way with CSS to set these other div's to have the same height as the content div?

Imar · February 13th, 2011, 11:46 AM

Since the height of the main content block is determined at run-time by its content, you can't adjust the height of the side bar / menu in your CSS. However, there are various solutions to this problem. Searching Google for fluid columns CSS should bring up some interesting reads: http://www.google.com/#hl=en&sugexp=...id+columns+Css

Cheers,

Imar

AlexW · February 13th, 2011, 02:21 PM

Thanks Imar.

Socantor · August 13th, 2011, 08:36 PM

Setting min height does it for me in a three column page. Trouble is, needs to be set for every page.