Grow your CSS skills. Land your dream job.

Give child div width:100% of page width, inside parent.

  • # April 27, 2009 at 10:06 pm

    [img]http://justinlowery.com/help_with_css.jpg[/img]
    How do I do this?

    Here’s the reference page:
    http://justinlowery.com/index.php/weddings-couples/

    I want to make the child gallery div wider than it’s parent div, and have a width of 100% of the browser window.
    The gallery is part of the wordpress content, so it must go in the container (entries) div. I want the gallery to fill the width of the screen, but 100% is relative to the container, not the page. If I do position:absolute; it makes the gallery large, but the left side is inside the container, and the rest of the gallery goes off the screen to the right, at 100% of the window width.

    Suggestions?

    # April 28, 2009 at 12:54 am

    Sure,

    Absolute Positioning will probably be the easiest way to do it. Here is what I would do:

    Code:
    .tiltviewer {
    position:absolute;
    left:0;
    right:0;
    }

    You may run into a problem with where the object is placed vertically. If it’s always going to be the same, just do:

    Code:
    top: ##px; /* the number of pixels from the top of the screen that it will always be*/

    Another problem is that since you are taking the object out of the page, content below it will move up behind it. You’ll just need to put in a place holder to keep everything below it.

    Make sense?
    Ashton Sanders

    # April 28, 2009 at 1:31 am

    That makes sense. I’ll try it and see how it goes.

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".