CODEWITHSUNDEEP
htmlcss
Roy
Roy

Reputation: 1518

What CSS is neccessary to create inner panel on 100% width div

I'm trying to create a semi-transparent background to lessen the interaction of the text with a textured background by using a semi-transparent div. I can't seem to figure out how to write the CSS to achieve this effect when the parent div's dimentions are defined by a pixel value height and 100% width.

Apparently I can't use margin to "shrink" the div when the height and width are defined as 100%. This is only a small section of the webpage so I'd like to avoid changing the entire layout to achieve this one effect.

HTML:

<div id="container">
    <div id="innerPanel"></div>
</div>

CSS:

html {
    height:100%;
    background-color:black;
}
#container {
    width:100%;
    height:250px;
    background-color:#0183e5;
}
#innerPanel {
    width:100%;
    height:100%;
    margin:15px;
    background-color:rgba(255, 255, 255, .5);
    border-radius:10px;
}

http://jsfiddle.net/rhewitt/qpYFV/1/

Example output

Upvotes: 3

Views: 1191

Answers (2)

Josh Powell
Josh Powell

Reputation: 6297

All you need to do is add padding to your parent container.

Here is the changed CSS:

#container {
    width:100%;
    height:250px;
    background-color:#0183e5;
    padding: 10px;
}

Demo

I suggest using box-sizing: border-box; or calc(100% - 20px) to not worry about figuring out what sizes to set.

Demo - box-sizing: border-box;

Demo - calc(100% - 20px)

Upvotes: 6

showdev
showdev

Reputation: 29168

I suggest applying padding to your container, rather than margin on your inner panel.

Also, remove the width from your container and adjust the height to account for the padding.

#container {
    height:220px; /* 250-(15x2) */
    background-color:#0183e5;
    padding:15px;
}
#innerPanel {
    width:100%;
    height:100%;
    background-color:rgba(255, 255, 255, .5);
    border-radius:10px;
}

http://jsfiddle.net/qpYFV/5/

Upvotes: 3

Related Questions