How do I change my div margins according to the width of my page?

Question

So on my website, I use two columns with modules in them to display information in them like this:

however I myself am working on vertical monitors and so when I change the width to a more landscape format, it looks like this:

currently the css code I'm using looks like this:

.module2 {
        display: block;
        border-radius: 0px 0px 25px 25px;
        background: url(wallparapet.png) no-repeat;
        background-size: cover;
        width: 85%;
        height: 250px;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: auto;
        margin-left: auto;
    }
    .module2inside {
        width: 90%;
        height: 75%;
        top: 20%;
        border-radius: 25px;
        position: relative;
        margin: 0 auto;
        background-color: #FFF;
        background-color: rgba(255, 255, 255, 0.8);
    }

module2inside representing the translucent inside with the actual content and module2 being the background to it. module2inside is just a div inside module2. So what can I do so that the inside stays underneath the cutout area no matter what the width of the page.

Now you should be able to upload the images if you like. – Bobby Aug 05 '15 at 18:01 — Bobby, Aug 05 '15 at 18:01
I am, look at the css code I used above – victo050 Aug 05 '15 at 18:05 — victo050, Aug 05 '15 at 18:05

Sylvain Martin · Answer 1 · 2015-08-05T20:22:27.920

0

You should remove the percentage in the top element, and set a fix value for margin-top in pixel, for example:

    .module2 {
        display: block;
        border-radius: 0px 0px 25px 25px;
        background: url(wallparapet.png) no-repeat;
        background-size: 100% auto;
        width: 85%;
        height: 250px;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: auto;
        margin-left: auto;
    }    
    .module2inside {
        width: 90%;
        height: 75%;
        border-radius: 25px;
        position: relative;
        margin: 0 auto;
        margin-top: 100px;
        background-color: #FFF;
        background-color: rgba(255, 255, 255, 0.8);
    }

edited Aug 05 '15 at 20:22

answered Aug 05 '15 at 18:07

Sylvain Martin

2,365
3
14
29

this gave me the same issue, it worked fine at first but as I made the page wider, the inner section went above where I wanted it to – victo050 Aug 05 '15 at 18:52
oh yes, you have to put margin-top: 100px; after margin: 0 auto; i edited the post – Sylvain Martin Aug 05 '15 at 20:01
still doesn't work, it may be because as the width increases, the scale of the background image, order to maintain its 100% width, zooms in, which makes the wall cutout larger, but at a larger rate than the page increases. – victo050 Aug 05 '15 at 20:17
then you should have a look on this post : http://stackoverflow.com/questions/376253/stretch-and-scale-css-background – Sylvain Martin Aug 05 '15 at 20:20

How do I change my div margins according to the width of my page?

1 Answers1