- This topic is empty.
December 4, 2011 at 8:08 pm #35464
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:
margin : 0 auto;
(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).
Ps. What I want is actually kind of the #logo-element on the frontpage of css-tricks.com.
BramDecember 4, 2011 at 8:26 pm #91860December 4, 2011 at 8:45 pm #91866
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
margin : 0 auto;
PS. I didn’t know you could use a left and right position at the same time, thanks ;)December 4, 2011 at 9:06 pm #91871
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.December 4, 2011 at 9:09 pm #91873
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.December 4, 2011 at 9:33 pm #91876
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).December 4, 2011 at 9:38 pm #91879
So it will only work on the left-side?December 4, 2011 at 10:49 pm #91884
It will only work on the right with
overflow-x: hidden;set on a parent element (e.g.
- The forum ‘CSS’ is closed to new topics and replies.