Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
|
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 11th, 2011, 11:27 AM
Authorized User
 
Join Date: Jan 2011
Posts: 89
Thanks: 1
Thanked 0 Times in 0 Posts
Default Footer doesnt move down with content

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...
 
Old February 11th, 2011, 01:15 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old February 11th, 2011, 04:01 PM
Authorized User
 
Join Date: Jan 2011
Posts: 89
Thanks: 1
Thanked 0 Times in 0 Posts
Default

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>
 
Old February 12th, 2011, 05:46 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old February 13th, 2011, 11:28 AM
Authorized User
 
Join Date: Jan 2011
Posts: 89
Thanks: 1
Thanked 0 Times in 0 Posts
Default

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?
 
Old February 13th, 2011, 11:46 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old February 13th, 2011, 02:21 PM
Authorized User
 
Join Date: Jan 2011
Posts: 89
Thanks: 1
Thanked 0 Times in 0 Posts
Default

Thanks Imar.
 
Old August 13th, 2011, 08:36 PM
Registered User
 
Join Date: Aug 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default CSS and footers

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
Footer doesnt move down with content AlexW BOOK: Beginning ASP.NET 4 : in C# and VB 5 February 11th, 2011 05:10 AM
How do you move the mouse outside the form and to move diagonally? fangzhien Visual Studio 2005 0 July 28th, 2009 10:06 PM
c:out doesnt work tllcll JSP Basics 1 November 1st, 2007 03:15 AM
Choosing content depending on content of other ele dsekar_nat XSLT 1 February 27th, 2006 05:58 AM
WHY DOESNT THIS WORK vb certified Pro VB.NET 2002/2003 5 August 1st, 2005 11:08 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.