How to set div to 100% width with padding without overflow

Question

When addind a css of something like

#mydiv {
    width: 100%;
    padding: 20px;
    background-color: red; /* only for visualization*/
}

<div id="mydiv" >my div<div/>

It will overflow the page.

How can I make this "100 percentage width" not overflow because of the padding?

I don't want to hide the overflow, but I want to make the width a little less than 100% but without having to hardcode some width.

Something like width: 100% - padding

score 2 · Answer 1 · edited Mar 01 '20 at 15:26

2

Add box-sizing: border-box to the div's css

edited Mar 01 '20 at 15:26

Temani Afif

answered Mar 01 '20 at 15:18

m_sultan

score 0 · Answer 2 · answered Mar 01 '20 at 15:07

0

By using calc, you can remove the padding from 100%

#mydiv {
    width: calc(100% - 40px)
    padding: 20px;
    background-color: red; /* only for visualization*/
}

<div id="mydiv" >my div<div/>

answered Mar 01 '20 at 15:07

danielarend

He added padding for all 4 sides, it will not work as you have written. – Manjuboyz Mar 01 '20 at 15:09
Did you run the code? Isn't it working as expected? Can you describe the problem? – danielarend Mar 01 '20 at 15:17

score 0 · Answer 3 · answered Mar 01 '20 at 15:08

0

use just

 width: auto;

no need to provide 100% it is by default uses full.

answered Mar 01 '20 at 15:08

Manjuboyz

score 0 · Answer 4 · answered Mar 01 '20 at 15:17

0

If div contain display property as Block no need to give width 100%, else add display property as block or flex

width:auto;
display:block;

else

display:flex;

answered Mar 01 '20 at 15:17

Palani samy

4 Answers4