Hello and welcome to our community! Is this your first visit?
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
    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;

    <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
    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. #2
    Senior Coder
    Join Date
    Feb 2009
    Ilkley, West Yorkshire, UK
    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. #3
    New Coder
    Join Date
    Jun 2009
    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 {

    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