1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Frustrating CSS Problem...

Discussion in 'HTML & Website Design' started by KingKon, Jul 20, 2009.

0
Page 1 of 2
  1. #1
    Hey guys,

    I've been trying to code my footer so that no matter what the height of the content is, the footer will always extend to the very bottom of the browser window.

    What's happening now is it cuts off at the minimum height, leaving a big white gap at the bottom if the content doesn't take up the entire window.

    Any suggestions?
     
    KingKon, Jul 20, 2009 IP
  2. sebau

    sebau Peon

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    show the source code or better show Your site for test. Because we are Nostradamus :)
     
    sebau, Jul 20, 2009 IP
  3. KingKon

    KingKon Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Here's my basic page:

    
<body>
<div id="header"></div>
<div id="navbar"></div>

<div id="wrapper">

	<div id="content">
	  <h1>Text</h1>
	</div>
	
</div>

<div id="footer"></div>

<body>
    HTML:
    And here's my CSS:

    
html, body {
	height: 100%;
	}

body {
	margin: 0px auto;
	font-family: Calibri;
	font-size: 16px;
	background-color: #FFFFFF;
	line-height: 1.3;
	}

#wrapper {
	display: table;
	width: 960px;
	margin: 0px auto;
	padding: 20px 0px 0px;
	}

#header {
	margin: auto;
	min-width: 965px;
	max-width: 965px;
	height: 30px;
	padding: 2px 15px 0px;
	background-color: #CC0000;
	font-size: 18px;
	font-weight: bold;
	color: #FFFF00;
	background-image: url(../images/header.jpg);
	}

#navbar {
	margin: auto;
	width: 100%;
	min-width: 1002px;
	max-width: 1006px;
	height: 30px;
	background-color: #0066CC;
	font-size: 18px;
	font-weight: bold;
	background-image: url(../images/button.jpg);
	}

#content {
	float: left;
	width: 625px;
	padding-right: 15px;
	min-height: 300px;
	margin-bottom: 20px;
	}

#footer {
	margin: auto;
	width: 100%;
	min-width: 965px;
	max-width: 965px;
	padding: 30px 0px 0px 0px;
	background-color: #0066CC;
	background-image: url(../images/footer.jpg);
	background-repeat: repeat-x;
	color: #FFFFFF;
	}
    HTML:
    What am I missing?
     
    KingKon, Jul 20, 2009 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    So basically you don't have enough content to fill up the window, but you want the footer at the bottom of the window? Then you could just position it there I suppose with
    
position:absolute;
bottom:0;
    Code (markup):
    But then there will be a white gap between the content and the footer (is this what you wanted?)
     
    wd_2k6, Jul 20, 2009 IP
  5. KingKon

    KingKon Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I was hoping there is a way the the footer would "stretch" itself to take up whatever space is left-over, either below the footer like my initial code or above it (between the content and footer) with the changes you've suggested.

    I've tried about everything I know. Certainly, there has to be a way, doesn't there?
     
    KingKon, Jul 20, 2009 IP
  6. KingKon

    KingKon Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    bump....................................................................
     
    KingKon, Jul 22, 2009 IP
  7. Destinyx3

    Destinyx3 Peon

    Messages:
    430
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Destinyx3, Jul 22, 2009 IP
  8. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #8
    When you say:

    You are saying the footer would stretch itself to take up whatever space is left over either below the footer or above it? huh? So is there 2 footers ?

    Are you looking for this:

    - If the main content and everything else does not fill up 100% of the browser window already, then the footer will take up all remaining space? ( I can't imagine why one would want to do this, but anyhow.)

    - This maybe could be done if it is what you are looking for , but first we need to know what is going to go in the footer, and would it be at the top in the middle or the bottom or change height etc....

    Maybe you can provide a visual representation of what you want just draw up some boxes on photoshop.
     
    wd_2k6, Jul 22, 2009 IP
  9. tori0067

    tori0067 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    No.. what he means is that the footer section might contain content that he has not estimated in the code, so if there is any way to let the footer automatcly stretch itself(and the website) to fit the content of the footer without letting it go outsite the footers borders.:)

    I really dont know how to do this, but I´ll do some research, and try and see what I can find out :)

    I know about some websites that might help you:
    - http://w3schools.com/css/default.asp :)
    - http://www.2createawebsite.com/design/css-tutorial.html :)
    Hope this helps
     
    tori0067, Jul 25, 2009 IP
  10. sudharsan

    sudharsan Active Member

    Messages:
    164
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #10
    try this format

    <body>
<div id="wrapper">    
<div id="header"></div>
<div id="navbar"></div>
<div id="content">      <h1>Text</h1>    </div> 
<div id="footer"></div>
 </div>
<body>
    HTML:
     
    sudharsan, Jul 25, 2009 IP
  11. erceex

    erceex Peon

    Messages:
    52
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    i like this code.
    just like facebook layout, where the footer stay at bottom (absolute position)

    i think, the footer better stay at the bottom, that's why its called footer. :)
     
    erceex, Jul 26, 2009 IP
  12. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Any DIV without an explicitly defined height will automatically stretch itself to fit any content
     
    wd_2k6, Aug 9, 2009 IP
  13. KingKon

    KingKon Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I'd been putting this off but I finally figured it out just as I was falling to sleep tonight since I need it done by tomorrow.

    So for anyone else who doesn't want to waste as much time as I did (and maybe for those who are about as equally bright as me *sarcasm*), the solution was tooooo simple:

    All I did was change the background color of the entire page to the footer color, then added a few extra white space <div>s to make up the differences.

    Worked like a charm!
     
    KingKon, Aug 31, 2009 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Since you needed the footer to "stretch", and since this isn't actually possible with Ryan's retarded sticky footer (I'm sorry but that "push" div is called "using markup incorrectly for presentation" and you can get a good sticky footer without retarded code like <div id="push"></div> which should be banished to the 7 hells), you've done the next best thing. I use this as well: the footer's background colour is actually on the body tag and so however long the page is, you'll see the "footer's" background colour and it will fake the appearance of the footer "stretching". Good job.

    Though "whitespace divs" sounds suspicious, couldn't you use margins on the top of the footer?
     
    Stomme poes, Aug 31, 2009 IP
  15. Hemuro

    Hemuro Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    you have a padding under the footer take that away. The page will end after the footer if it can but the padding you put

    padding: 30 0 0 0px

    puts it there, it's just a simple typo.
     
    Hemuro, Aug 31, 2009 IP
  16. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #16
    padding: 30 0 0 0px will be ignored, because there are no units after "30" and if there were units, they would be top padding. Agreed that it should be removed since it's wrong code.
     
    Stomme poes, Sep 1, 2009 IP
  17. Hemuro

    Hemuro Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    actually if you look it's

    30px 0px 0px 0px

    but that's irrelevant. i personally have a margin that reads

    0 0 20 0px

    and it works. so actually know what you're talking about or don't say it.
     
    Hemuro, Sep 1, 2009 IP
  18. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Stomme poes, Sep 2, 2009 IP
  19. Hemuro

    Hemuro Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    that one unit at the end sets the unit for the rest, idk it's just the way that attribute is programmed.

    NICE LINKS LOL, Stomme Pos.
     
    Hemuro, Sep 2, 2009 IP
  20. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #20
    I tried that too, on a page I was already working on (so it had
    p {
    margin: 10 0px;
    }
    with units on the zero, which also should be ignored since nothing = nothing in all units). I still lost all margins on that p (though I checked that one only in Firefox).
     
    Stomme poes, Sep 3, 2009 IP
Page 1 of 2