You are viewing our Forum Archives. To view or take place in current topics click here.
[HTML/CSS] Scaling div height based on content
Posted:

[HTML/CSS] Scaling div height based on contentPosted:

-Deano
  • Rated Awesome
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
I am currently stuck trying to get my footer to be at the very bottom of my page.

Here's an example of two pages:
[ Register or Signin to view external links. ]
[ Register or Signin to view external links. ]

In the first (i have blocked out the content), the footer is at the bottom of the page because it is set to be displayed after my #content div. The div is set to X-height.

In the second, you can see that the div does not scale based on the content I put which is where I am stuck. I don't want to set every page I create to have some ridiculously large pixel height just because I have one tall page.

How am I able to get my footer to appear after all the content on the page?

[ Register or Signin to view external links. ]
I had to imgur it as it wouldn't let me submit HTML code or put a paste bin link.

Any help is greatly appreciated. Sorry for being a scrub :satisfied:
#2. Posted:
ObscureCoder
  • Resident Elite
Status: Offline
Joined: Jun 29, 201311Year Member
Posts: 211
Reputation Power: 13
Status: Offline
Joined: Jun 29, 201311Year Member
Posts: 211
Reputation Power: 13
The error lies in your CSS, not your HTML, post that.

Also, start using HTML5 tags such as <header>, <footer>, <nav>, <section>, <article> etc.
In your footer, putting <span> into a <p> is effectively meaningless.
#3. Posted:
Redacted
  • Blind Luck
Status: Online
Joined: Mar 02, 201410Year Member
Posts: 4,749
Reputation Power: 6057
Status: Online
Joined: Mar 02, 201410Year Member
Posts: 4,749
Reputation Power: 6057
On your code, the <div id="footer"> is still in the Wrapper.

Not sure if that's deliberate or not
#4. Posted:
-Deano
  • PC Master Race
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
ObscureCoder wrote The error lies in your CSS, not your HTML, post that.

Also, start using HTML5 tags such as <header>, <footer>, <nav>, <section>, <article> etc.
In your footer, putting <span> into a <p> is effectively meaningless.


Yeah, idk why there was a span there. I think originally I used a span but changed it to be a separate div, forgot to remove it.

I've left out a lot of my CSS and most of it is irrelevant to this particular thing, such as Navbar, log table, home page layout, etc.

So, if I understand what I'm doing correctly, I need to be able to change the #content div to a varying height instead of one absolute value.


#wrapper { /* Encase all of the page */
    background: linear-gradient(#ffe0e0, #ffffff);
    margin: 0 auto;
    text-align: center;
    width: 920px;
}

#content { /* Page content (everything minus the footer) */
    height: 1000px;
}

#section { /* #content minus the nav bar */
    float: left;
    width: 100%;
}

#footer { /* Page footer */
    background-color: red;
    display: block;
}
#5. Posted:
-Deano
  • PC Master Race
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Jack_Sparrow wrote On your code, the <div id="footer"> is still in the Wrapper.

Not sure if that's deliberate or not


Yes, the way I have my page set is like so:

[ Register or Signin to view external links. ]

Or at least, that's what I'm trying to do.
#6. Posted:
Redacted
  • Zombie Referee
Status: Online
Joined: Mar 02, 201410Year Member
Posts: 4,749
Reputation Power: 6057
Status: Online
Joined: Mar 02, 201410Year Member
Posts: 4,749
Reputation Power: 6057
Could you give me the code for the webpage also please
#7. Posted:
-Deano
  • PC Master Race
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Jack_Sparrow wrote Could you give me the code for the webpage also please


That was in the original post: [ Register or Signin to view external links. ]
I had to link to imgur as it didn't like me posting it.
#8. Posted:
Redacted
  • Winter 2020
Status: Online
Joined: Mar 02, 201410Year Member
Posts: 4,749
Reputation Power: 6057
Status: Online
Joined: Mar 02, 201410Year Member
Posts: 4,749
Reputation Power: 6057
-Deano wrote
Jack_Sparrow wrote Could you give me the code for the webpage also please


That was in the original post: [ Register or Signin to view external links. ]
I had to link to imgur as it didn't like me posting it.


I mean can you copy+paste it so i can use it
#9. Posted:
-Deano
  • Rated Awesome
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Jack_Sparrow wrote
I mean can you copy+paste it so i can use it

paste bin.com/N0D6S9AZ

I have to separate the link as TTG filters it.
#10. Posted:
Redacted
  • Blind Gifter
Status: Online
Joined: Mar 02, 201410Year Member
Posts: 4,749
Reputation Power: 6057
Status: Online
Joined: Mar 02, 201410Year Member
Posts: 4,749
Reputation Power: 6057
Hows this?

[ Register or Signin to view external links. ] bin.com/cnwE7KyV

put space in
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.