Centering without clipping on smaller screens?

Asked Aug 06 '13 at 20:42

Active Aug 06 '13 at 20:42

Viewed 57 times

I am trying to center an element/div horizontally on a page. My usual strategy for this is to do margin:0 auto or margin-left:50%; and make up the difference with left:-half the div width;.

However when I do this, I run into a problem when I view the website on a smaller screen or browser size. Basically if the viewport is less than the width of the div, some of the div is clipped and there is no way to scroll to see the rest of it. The overflow property seems to be unaffected by this?

This is a problem I've run into a few times and haven't ever been able to find a solution. I poked around the forums but I couldn't find an answer. Any help to push me in the right direction would be helpful!

Some examples of where this happens (just resize your browser window to be a small width and you'll see it happen):

http://brienhopkins.com/resume/

http://quintinmarcus.com

Thank you!

asked Aug 06 '13 at 20:42

Quintin

Try this: http://stackoverflow.com/a/18080552/2523764 – Arbaoui Mehdi Aug 06 '13 at 20:44
This runs into the same problem as if you shrink past the size of the div the left half of the div becomes clipped and you are only able to scroll to see the right half. – Quintin Aug 06 '13 at 20:51
1

In theory, this should work fine. http://jsfiddle.net/KCRmD/ Your issue is probably something else on those sites. – andi Aug 06 '13 at 20:54
You mean responsive design? – putvande Aug 06 '13 at 22:12

Centering without clipping on smaller screens?

0 Answers0