Question

Goodevening!

My problem is fairly simply, my div extends beyond the screen.
I have this div:

<div id="button">Button-text</div>

My CSS looks like:

#button {
    background-color: grey;
    text-align:center;
    padding:10px;
    margin:15px;
    width:100%;
}

I could solve it with box-sizing(but that won’t work on older browsers), and it have to be responsive. Any solutions?

I also have set up a jsfiddle: http://jsfiddle.net/2k9Cd/

Answer 1

In that case, use % for margins and padding.

#button {
    background-color: grey;
    text-align:center;
    padding:2%;
    margin:3%;
    width:90%;
}

Here is jsfiddle

Note: width (%) = 100% – [2 x margin(%)] – [2 x padding(%)]. In this case that is 90%=100%-2×3%-2×2%