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

[justinlowery]

[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?

[AshtonSanders]

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

[justinlowery]

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

[Author]

Posts