Contain one div in another div

Question

I cannot understand why the div named "boxb1" isn't inside the div named "bba". I have tried many different things but I just cannot nest these divs.

Shouldn't "bba" accomaodate "boxb1" within itself? I am trying to create a responsive page here. ?

jsfiddle of the code.

My code:

 html {} body {
   padding-bottom: 1%;
 }
 .container {
   width: 98.3%;
   margin: 10px;
   padding-bottom: 5%;
   position: relative;
 }
 #twlth {
   width: 100%;
   padding-top: 5%;
   padding-bottom: 5%;
   float: left;
 }
 #boxb1 {
   width: 21%;
   padding-bottom: 1%;
   float: left;
   margin: 10px;
   text-align: center;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 }
 .bba {
   width: 100%;
   -webkit-box-shadow: 10px 10px 108px 0px rgba(0, 0, 0, 0.68);
   box-shadow: 10px 10px 108px 0px rgba(0, 0, 0, 0.68);
   padding-bottom: 1%;
   margin-bottom: 100px;
 }

<body>

  <div class="container">
    <div class="bba">
      <h1 style="text-align: center">Text</h1>
      <div id="boxb1">
        <h3>box1</h3>
        <div id="twlth" width="10%" height="6%"></div>
      </div>
    </div>
  </div>
</body>

score 0 · Accepted Answer · answered Dec 06 '15 at 10:35

The problem is that you're using a float: left but aren't "clearing" anything after it. Non-positioned and non-floated elements act as if the floated element isn't there. since the floated element is out of flow in relation to other block elements. Meaning: since 'boxb1' has a 'float: left' it's parent will pretend that the 'boxb1' isn't there.

In the css add something like:

.clear {
    clear: both;
}

The html could be changed like this:

<div class="container">
<div class="bba">
    <h1 style="text-align: center">Text</h1>
    <div id="boxb1">
        <h3>box1</h3>
        <div id="twlth" width="10%" height="6%"></div>
    </div>    
<div class="clear"></div>
</div>

Jsfiddle

See: http://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/ for more info about this (and other potential solutions)

Contain one div in another div

1 Answers1