Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    100% Height only 100% of visible page?

    I have a website that I'm working on (My first CSS site so I'm sure the code is TERRIBLE!)

    Anyways, the link is

    http://goopgaming.com/indextest.php

    As you can see I have a bright blue background in my main content area to show my issue. If you scroll down, the blue background stops and doesn't go all the way to the bottom of the actual content. My CSS is:

    Code:
    #contentcontainer  {
       background-color: blue;
       visibility: visible;
       position: absolute;
       width: 1200px;
       height:100%;
       top: 33px;
       margin-left: auto;
       margin-right: auto;
    }

    Can anyone help/explain to me what's wrong? I've been having huge issues trying to get an extendable background color depending on how much content is on the page!

    Thank you!

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    #headlinetext {
    visibility: visible;
    position: absolute;
    left: 52px;
    top: 500px;
    z-index: 4;
    width: 770px;
    }
    needs a height. whenever you absolute, float, or take an element outside of its normal flow, you need to set a
    height or use clearfix/clear or else it will register as height: 0;

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    #headlinetext  {
       visibility: visible;
       position: absolute;
       left: 52px;
       top: 500px;
       z-index: 4;
       height: 100%;
       width: 770px;
    }
    Did not seem to fix the problem unfortunately. Anything else you can think of that I should look at?

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    height: 100%; will set the height equal to the height of the screen (700-900px). try setting the height to 1700px; to headline and contentContainer

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wont setting the height to a set pixel amount mean that it wont get bigger or smaller depending on the content on the page?

    Tables seemed so much easier... lol

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    yes, but you MUST set a height when absoluting something

    http://www.positioniseverything.net/easyclearing.html

    Code:
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    if the content height is over say 500px or indefinite (comments) I would suggest using clearfix ^
    Last edited by Sammy12; 07-10-2011 at 08:07 PM.

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Would you recommend using relative instead?

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Honestly, if you write a page the right way the first time (without absoluting), the website will work on all browsers bug-less, and smoothly. PM me if you want me to help you out. The website you have written will run into many more errors later on

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It wont let me pm you for some reason, but feel free to add me on skype: ian.c.gillespie

    maybe we can work something out!

    Thanks for your help again, really do appreciate it, i'm really new to this.

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    do you have a gmail?

  • #11
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No Gmail.
    Last edited by wuzzle; 07-10-2011 at 08:39 PM.

  • #12
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    filler
    Last edited by Sammy12; 07-10-2011 at 08:59 PM.

  • Users who have thanked Sammy12 for this post:

    wuzzle (07-10-2011)

  • #13
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Just want to say Sammy12 is a very valuable member of this community. His help has been more than amazing. I never expected someone I don't even know to go out of there way for more than a hour to try and help me out.

    Thank you!

  • #14
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    paste here full code....


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •