April 20, 2021

Software Mile.com

Latest Software News and Hacks

CSS: Nested DIV

I trying to understand how to style HTML with CSS and I’m having some trouble on nested divs. I have the following simple html:

<body>

    <div class="box1">
        <div class="box2">

        </div>
        <div class="box3">

        </div>

    </div>
</body>

and the css code:

  .box1{
    background-color:gold;
    border: solid 5px;
    border-radius:10px;
    min-height:90px;
    width:300px;
 
  }
  
  .box2{
    background-color: blue;
    min-height:30px;
  }

  .box3{
    background-color: red;
    min-height:30px;
  }

the blue box goes beyond the limits of box1 into the border. I have tried with box-sizing: border-box but it does not make any difference.

I would like some help to understand, how the blue box can fit nicely within the bigger container (yellow box)within the border limits.

Thanks,


Go to Source of this post
Author Of this post: Fan Santboia
Title Of post: CSS: Nested DIV
Author Link: {authorlink}