Why the child Div exceeded the parent div right border

Question

In my project, I want to set my web homepage to four parts. So I defined four divs, about upleft, upright, downleft, downright in content div.

I want to set 20px padding in content div , the left border is OK, But the right side is wrong.

The upright and downright is exceeded the right border of content div.

Ｉ have defined the four parts CSS

The code is:

<body style="background:url(./image/taiyi.jpg); height:100%; width:100%;background-repeat:no-repeat">
  <style>
   .content{
     margin-left:auto;
     padding: 20px;
     margin-right:auto;
     width: 1400px;
     height:850px;
     background-color:white;
   }
  .content .uprow{
    width: 1400px;
    height: 400px;
    text-align:center;
    border: 1px solid #e5e5e5;
  }
  .content .uprow .upleft{
    width: 600px;
    height: 400px;
    float: left;
    background-color: white;
    border: 1px solid #999;
  }
 .lm_title_con{
   width: 600px;
   height: 100px;
   padding: 10px 20px;
 }
.lm_title_con .lm_title{
   width: 85px;
   line-height: 45px;
   height: 30px;
   float: left;
   line-height: 30px;
   color: #3E6BC0;
   font-size: 18px;
   text-align: center;
   border-bottom: 1px solid #3E6BC0;
 }
.content .uprow .upright{
  width: 600px;
  height: 400px;
  float: right;
  background-color: white;
  border: 1px solid #999;
}
.content .downrow{
  width: 1400px;
  height: 400px;
  margin-top: 20px;
}
.content .downrow .downleft{
  width: 600px;
  height: 400px;
  float: left;
  border: 1px solid #999;
  background-color: white;
}
.content .downrow .downright{
  width: 600px;
  height: 400px;
  float: right;
  border: 1px solid #999;
  background-color: white;
}
 </style>

 <script type="text/javascript">
   $(function() {
    $("#header").load("header_02.html");
 });
 </script>

<div id="header"></div>    
<div class="content">
  <div class="uprow">
    <div class="upleft">
      <div class="lm_title_con">
        <div class="lm_title">
            中心宣传片
        </div>
      </div>      
    </div>
    <div class="upright"></div>
  </div>
  <div class="downrow">
    <div class="downleft"></div>
    <div class="downright"></div>
  </div>
</div>
<!--footer start-->
<div id="footer"></div>
<script>
$(function() {
    $("#footer").load("../footer_02.html");
});
</script>
<!--footer end-->
</body>

</html>

I have set padding: 20px; in content CSS. But upright and downright div exceeded the right border.

I am confused, who can give me a help?

I'll try your code on codepen.io and i don't see your issue.... — Sfili_81, Sep 06 '19 at 07:18
The code as given does not appear to reproduce the problem; but what your screenshot shows, looks like you need to go read up on the basics of the CSS Boxel Model - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model, https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#What_is_the_CSS_box_model — misorude, Sep 06 '19 at 07:41
@all, thank you all of you. I have update my code. and this is my all code. But Prakash Rajotiya’s method solves this problem. — stack, Sep 06 '19 at 07:55

score 1 · Accepted Answer · answered Sep 06 '19 at 07:22

1

Hope this help you.

Please try below CSS.

body{
 margin:0;
}

.content{
 margin-left:auto;
 padding: 20px;
 margin-right:auto;
 width: 1400px;
 height:850px;
 background-color:white;
 box-sizing: content-box; /*new added*/
}

answered Sep 06 '19 at 07:22

Prakash Rajotiya

1,013
5
11

wow, that is amazing, it works OK. But I don't know why, can you tell me the reason? – stack Sep 06 '19 at 07:35
The CSS box-sizing property allows us to include the padding and border in an element's total width and height.(https://www.w3schools.com/css/css3_box-sizing.asp) – Prakash Rajotiya Sep 06 '19 at 08:24

Amarjit Singh · Answer 2 · 2019-09-06T07:33:13.773

You have to make box-sizing:border-box, it will keep the padding inside the div.

<style>
*{
box-sizing: border-box;
}
.content{
  margin-left:auto;
  padding: 20px;
  margin-right:auto;
  width: 1400px;
  height:850px;
  background-color:white;
}
.content .uprow{
  width: 1400px;
  height: 400px;
  text-align:center;
  border: 5px solid #e5e5e5;
}
.content .uprow .upleft{
  width: 600px;
  height: 400px;
  float: left;
  background-color: white;
  border: 1px solid #999;
}
.lm_title_con{
  width: 600px;
  height: 100px;
  padding: 10px 20px;
}
.lm_title_con .lm_title{
  width: 85px;
  line-height: 45px;
  height: 30px;
  float: left;
  line-height: 30px;
  color: #3E6BC0;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #3E6BC0;
}
.content .uprow .upright{
  width: 600px;
  height: 400px;
  float: right;
  background-color: white;
  border: 1px solid #999;
}
.content .downrow{
  width: 1400px;
  height: 400px;
  margin-top: 20px;
 }
.content .downrow .downleft{
  width: 600px;
  height: 400px;
  float: left;
  border: 1px solid #999;
  background-color: white;
}
.content .downrow .downright{
  width: 600px;
  height: 400px;
  float: right;
  border: 1px solid #999;
  background-color: white;
}
</style>

<body style="background:url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500); height:100%;width:100%;background-repeat:no-repeat">
  <div class="content">
    <div class="uprow">
      <div class="upleft">
        <div class="lm_title_con">
          <div class="lm_title">
            中心宣传片
          </div>
        </div>    
      </div>
    <div class="upright"></div>
  </div>
  <div class="downrow">
    <div class="downleft"></div>
    <div class="downright"></div>
  </div>
</div>
</body>

Please check again it is working `*{ box-sizing: border-box; }` — Amarjit Singh, Sep 06 '19 at 07:32

score 0 · Answer 3 · answered Sep 06 '19 at 07:25

0

Add padding right to below style CSS.
.content .uprow {
    width: 1390px;
    height: 400px;
    text-align: center;
    border: 1px solid #e5e5e5;
    padding-right: 10px;
}

.content .downrow{
 width: 1390px;
    height: 400px;
    text-align: center;
    border: 1px solid #e5e5e5;
    padding-right: 10px;
}

answered Sep 06 '19 at 07:25

supriya suresh g

385
1
2
13

it will make upright and upleft different size. I have tried as this, but the result is wrong – stack Sep 06 '19 at 07:33

Why the child Div exceeded the parent div right border

3 Answers3