0

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}
<h2>Grid of Boxes</h2>
<p>Float boxes side by side:</p>

<div class="big-box" style="margin-bottom:30px;">
  <div class="box" style="background-color:#bbb">
  <p>Some text inside the box.</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>Some text inside the box.</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>Some text inside the box.</p>
  </div>
</div>

<p style="clear:both;">Note that we also use the clearfix hack to take care of the layout flow, and that add the box-sizing property to make sure that the box doesn't break due to extra padding. Try to remove this code to see the effect.</p>

in the above code margin-bottom:30px on div with class = big-box is not working.WHY??? I also need suggestions how can I apply margin bottom in this kind of scenerio. I am very new to CSS and this might be a very silly questions or code may contain some silly errors.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Anurag Singh
  • 1

2 Answers2

1

To answer your question:

  1. Your big-box's margin bottom is working, but 30px is still small compare to the 3 floating boxes. So when you look at it, it does not look like the big box is wrapping the 3 boxes.

There are 2 solution:

  1. specify a height that is bigger or at least equal to the 3 floating box.
  2. remove float:left from your box class and give big box display:flex and 100% width

Below example is the second solution. 

      * {
        box-sizing: border-box;
      }
      .box{
        width:33.33%;
        padding:50px;
      }
      .big-box{
        display:flex;
        margin-bottom:30px;
        width:100%;
      }
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h2>Grid of Boxes</h2>
    <p>Float boxes side by side:</p>

    <div class="big-box" >
      <div class="box" style="background-color:#bbb">
        <p>Some text inside the box.</p>
      </div>
      <div class="box" style="background-color:#ccc">
        <p>Some text inside the box.</p>
      </div>
      <div class="box" style="background-color:#ddd">
        <p>Some text inside the box.</p>
      </div>
    </div>

    <p style="clear:both;">
      Note that we also use the clearfix hack to take care of the layout flow,
      and that add the box-sizing property to make sure that the box doesn't
      break due to extra padding. Try to remove this code to see the effect.
    </p>
  </body>
</html>

Hopefully this is the answer you are looking for.

Ajeet Eppakayala
  • 1,186
  • 1
  • 10
  • 17
Jin Tan
  • 518
  • 6
  • 19
-1

Try adding height attribute value to your style. Without height it is normally assumed as a small space or line. So simply saying without it, when you are specifying the margin-bottom the text overlaps inside the boxes and html5 without any explicit declaration won't allow this. Try adding a border color you will understand what I am saying. <div class='big-box' style='height: somevalue; margin-bottom:30px; border: 2px solid red;' >

Probably this will solve your issue and also you can add height to your box class too

Arunkumar Palanisamy
  • 1
  • 4
  • no this will not solve the problem because as already correctly mentioned the problem is the float value. adding a height to the boxes will make the design unresponsive and still not fix the problem. you dont ever had and never will need a fixed height to sue a margin value. – tacoshy Aug 16 '20 at 05:00