How to set a layer inside another being responsive with a margin

Question

I'm trying to create a layer inside another with a margin, but I'm not able to do it.

The HTML code is:

    <div  className = "sizeMD">
        <div className = "container">
            <div className = "marco">
                hola
            </div>
        </div>
    </div>

The <div> with className = "container" has an image like a background image and inside of this I want to create another which would be a margin: 5%; up, right, down and left. So, this layer would be always inside the other layer with that margin.

The CSS is:

.container{
    position: relative;
    padding: 0%;
    background-image: url("http://ec2-54-171-196-69.eu-west-1.compute.amazonaws.com/static/media/bread.b9ced272.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    height: 450px;
}

.marco{
    position: absolute;
    margin: 5%;
    top: 0;
    left:0;
    width: 100%;
    height: auto;
    background-color: yellow;
}

And this is what I get right now:

I would like that yellow layer would be always inside of the layer with the image in background.

Edit

Following the wise advice of @admcfajn the yellow layer is contained inside of layer container, but the height of this layer is not enough.

What can I do to make the height of the container bigger than yellow?

Does this answer your question? [Semi-transparent color layer over background-image?](https://stackoverflow.com/questions/9182978/semi-transparent-color-layer-over-background-image) — FluffyKitten, Jul 28 '20 at 16:59
Or this which uses flexbox, which is a more up-to-date way of doing things :) [ Positioning text over image (html,css)](https://stackoverflow.com/questions/42450098/positioning-text-over-image-html-css) — FluffyKitten, Jul 28 '20 at 17:01

admcfajn · Accepted Answer · 2020-07-28T17:03:49.503

2

When using absolute-positioning, try using the left,right,top, & bottom css rules to define the margin instead of margin.

The attribute should be class, not className & we can add a background-size:cover to the .container element because otherwise it can look misleading if the background only covers a portion of the element and makes it looks like it's cut-off too soon.

Also, when organizing your css, try putting the more important stuff ( width, height, display, things that are layout & technical rather than just aesthetic higher up in your css-declarations to make them more noticeable ) & we don't ever need a unit after a 0, eg: 0% 0px 0rem... just use 0 instead

.container{
    position: relative;
    height: 450px;
    padding: 0;
    background-image: url("http://ec2-54-171-196-69.eu-west-1.compute.amazonaws.com/static/media/bread.b9ced272.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}
.marco{
    position: absolute;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: 5%;
    background-color: yellow;
}

<div class="sizeMD">
<div class="container">
    <div class="marco">
        hola
    </div>
</div>
</div>

edited Jul 28 '20 at 17:03

answered Jul 28 '20 at 16:35

admcfajn

2,013
3
24
32

Dud you try this? That was my first thought too but it doesn't work with the code in the question - the bottom extends outside the container. – FluffyKitten Jul 28 '20 at 16:38
Thanks for your help!!!! It works!!! But, I'm still getting a problem with the height of the layer container because yellow layer is bigger than this :( I'm going to edit my original post with more information. – José Carlos Jul 28 '20 at 16:38
1

Stretching the outter container around an absolute-position container won't be possible without a psuedo element or javascript. You could though, have the background image of the food be a `::before` pseudo-element to get it to stretch around the .marco element, or give it a height with javascript on load & when the browser-size changes – admcfajn Jul 28 '20 at 16:42
@JoséCarlos You shouldn't accept an answer that doesn't fully answer your question! Questions are for the benefit of other users too, so this is misleading them into thinking it fixes their same problem when it doesnt :) – FluffyKitten Jul 28 '20 at 16:42
@admcfajn Is there any example? I have never used it before :( – José Carlos Jul 28 '20 at 16:47
1

Updated my answer @JoséCarlos hope that helps :) – admcfajn Jul 28 '20 at 16:59
OMG!!! You saved my life!!! Thaaaaaaaaank you so much @admcfajn!!! – José Carlos Jul 28 '20 at 17:06
1

Anytime @JoséCarlos glad we got it sorted out :) Have a great day & stay safe out there friend! – admcfajn Jul 28 '20 at 17:08

score 1 · Answer 2 · answered Jul 28 '20 at 16:40

1

Try adding box-sizing: border-box to your css for all elements. These kinds of sizing issues often result from unintuitive box model sizing.

answered Jul 28 '20 at 16:40

Nate G

132
5

Thanks for your appreciated help, but it doesn't work :( – José Carlos Jul 28 '20 at 16:45

How to set a layer inside another being responsive with a margin

Edit

2 Answers2