Stretchable overlay

[Historical Forums User]

Dear,

I have a container (margin: 0 auto;) and an overlay div.

I want to position the overlay div in the middle of the page, but also make it stretched to the right side of the screen.

For the moment i have:

#container {

margin : 0 auto;

width: 900px;

position:relative;

}

#overlay {

position:absolute;

right: 450px;

width: 9999px;

padding-right: 9999px;

}

(and #overlay is a child of #container in the html).

The only problem with this code, is that I have a scrollbar on the screen (because of the padding).

Visual:

Ps. What I want is actually kind of the #logo-element on the frontpage of css-tricks.com.

Kind regards,
Bram

[joshuanhibbert]

Here is how I would do it: http://jsfiddle.net/sl1dr/6qGAp/

[Historical Forums User]

First: thanks for responding.

Second: I need to adjust my question a bit, consider the #overlay is not positioned at 50% but relative to the container, so for example

#container {

margin : 0 auto;

width: 900px;

position:relative;

}

#overlay {

position:absolute;

right: 350px;

width: 9999px;

padding-right: 9999px;

}

PS. I didn’t know you could use a left and right position at the same time, thanks ;)

[joshuanhibbert]

Well as you have content disappearing off the right hand side of the screen scrollbars will naturally occur. You could use overflow-x: hidden; on the body element, but that is dangerous territory, and if your design isn’t responsive then it’s no good.

[Historical Forums User]

I have also thought of that, and it’s my emergency solution ;), but the #logo-element on the frontpage of css-tricks.com is done without that, and I can’t figure out how.

[joshuanhibbert]

Ah, the negative margin, positive padding trick works fine on the left hand side of the page, just not the right. That being said, Chris uses absolute positioning (as I did in my demo above).

[Historical Forums User]

So it will only work on the left-side?

[joshuanhibbert]

It will only work on the right with overflow-x: hidden; set on a parent element (e.g. body).

[Author]

Posts