Grow your CSS skills. Land your dream job.

100% height in relative positioning

  • # December 4, 2008 at 7:43 pm

    This is a horrible problem because it one I have over come many times and it has never caused me any real issues. HOWEVER, it seems I have been spending too much time on the back-ends of sites and my CSS has gone to the dogs.

    I decided to redesign my portfolio in WordPress (inspired by the WordPress Week) to have a look at what it can do. I have been stuck on this one issue for too many hours now and I am thinking its just a too much coffee not enough sleep issue.

    All i want to do is to set the colum with the pink ‘I WANT THIS TO BE 100% OF ITS PARENT DIV’ to be 100% of its parent div (shock). Could anyone give me a second to firebug this and see what they think?
    http://www.iamadtaylor.com/

    Thanks,
    Ad

    # December 4, 2008 at 10:16 pm

    If it’s filling the indention with dots that you want, then you can easily fix this by one of two ways.

    1. Blanket the parent div with dots under a white-backgrounded content:

    Code:
    #latestBlog {
    background: transparent url(http://cdn.css-tricks.com/images/blueBotArchives.jpg) repeat scroll 0 0;

    }
    #latestBlog #latestBlogHold {
    background: white;

    }
    #postIndent {
    /* removed background */

    }

    2. Create a 6.3em image of dots and use repeat-y on parent’s background:

    Code:
    #latestBlog {
    background: transparent url(http://cdn.css-tricks.com/images/blueBotArchives-wider.jpg) repeat-y scroll 0 0;

    }
    #postIndent {
    /* removed background */

    }

    [img]http://i37.tinypic.com/iw84ug.jpg[/img]

    If it’s something actually spanning the div to the size of the content… then well, in my experience your only option is to javascript it:

    Code:
    window.onload = function(){
    .style.height = .clientHeight;
    };
    # December 5, 2008 at 2:53 pm

    Thanks a lot for your help!!
    I thought about doing that but didn’t want to cheat as I have been concerned about losing my CSS knowledge. Please it wasn’t me being a fool!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".