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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS and Div Tag Height Issue

    Hi all.

    I'm having a problem with div tags and height, with something that as far as I can tell, should work.

    Basically I have a page with various div tags, looks something like this;

    Code:
    <body>
    <div class="holder">
    <div class="logo">logo</div>
    <div class="navigation">Navigation here</div>
    <div class="news">More divs contained in here</div>
    More divs contained
    </div>
    </body>
    The css for this has the height defined for the holder div. If I put a specific height such as 1000px it works. But that's not really any good to me, as I need it to be 100% of all the content. But if I put 100%, the background stops past the navigation area, and I can't for the life of me figure out why.

    Hope that makes sense, and can nyone help?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hard to tell without a link to your page, or your code.

    It might be that your #news elements are floated, and you need to clear the floats to extend #holder down to the end of them.

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    35
    Thanks
    4
    Thanked 1 Time in 1 Post
    If i remember corectly i think that if you want to have height:100% you need to have parent of that element to have height:100%.

    Quote from some other forum:

    Most attempts to accomplish this were made by assigning the property and value: div{height:100%} - this alone will not work. The reason is that without a parent defined height, the div{height:100%;} has nothing to factor 100% percent of, and will default to a value of div{height:auto;} - auto is an "as needed value" which is governed by the actual content, so that the div{height:100%} will a=only extend as far as the content demands.

    The solution to the problem is found by assigning a height value to the parent container, in this case, the body element. Writing your body stlye to include height 100% supplies the needed value.

    body {
    margin:0;
    padding:0;
    height:100%;
    }

    Now when height:100%; is applied to divs (or other elements) contained withing the body, the height percentage has a containing (body) value to work with.


  •  

    Posting Permissions

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