Padding causes columns to not display properly

Question

Using padding causes columns to not display properly.

/*Column code*/
.column {
   float: left;
   width: 50%;
   font-family: 'Trebuchet MS', sans-serif;
   padding: 1cm;
}
.row:after {
   content: "";
   display: table;
   clear: both;
 }
 @media screen and (max-width:600px) {
   .column {
     width: 100%;
   }
 }

Columns with padding.

Columns without padding.

reset box-sizing to border-box, to include paddings and borders for size calculation. Your snippet is missing your HTML btw. Also, for a single row, you better use flex/flex-wrap than float unless you code for jurassic kind of browsers ;) — G-Cyrillus, Sep 10 '21 at 15:47

score 0 · Answer 1 · answered Sep 10 '21 at 15:49

0

cm is not recommended for screens try changing padding to percentage or px. have a look at this blog for details

answered Sep 10 '21 at 15:49

Muhammad Hamza

1
2

score 0 · Answer 2 · answered Sep 10 '21 at 15:49

You have set the width of each column to 50%. If there is no padding (or margin or border) on each of those elements then two will fit in the width of the viewport (when that is above your media query).

However, when you add padding the overall width of each column goes up to 50% + 2xpadding.

This happens if the box-sizing is set at the default.

You can override this by setting box-sizing: border-box this will include padding etc in the set width.

Further info at MDN:

content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Padding causes columns to not display properly

2 Answers2