CSS border not wrapping around nested divs

Question

Just wondering why .border will not wrap around nested divs d1, d2, d3.

The div with id main1 has a 5px solid border that I am trying to wrap around the three nested divs with ids div1, div2, div3. Each of the nested divs have there own 2px solid border. Seems like it should work but maybe something is getting overwritten somewhere.

.border {border: 5px solid RosyBrown;}
.border-thin {border: 2px solid RosyBrown;}
div#main1 {width: 90%;margin: 0 auto 0 auto;}
div#d1 {width: 31%; float: left;}
div#d2 {width: 31%; float: left; margin: 0 0 0 3.5%;}
div#d3 {width: 31%; float: right;}

<div id="main1" class="center border">
   <p>Main</p>
     <div id="d1" class="border-thin">
       <p>d1</p>
     </div>
     <div id="d2" class="border-thin">
       <p>d2</p>
     </div>
     <div id="d3" class="border-thin">
      <p>d3</p>
     </div>
</div>

Answer 1

Since you haven't cleared the floats, as it doesn't take up the view's flow. Give:

overflow: hidden;

to the parent div, or you can use the clearfix .

 .border { border: 5px solid RosyBrown; } .border-thin { border: 2px solid RosyBrown; } div#main1 { width: 90%; margin: 0 auto 0 auto; overflow: hidden; } div#d1 { width: 31%; float: left; } div#d2 { width: 31%; float: left; margin: 0 0 0 3.5%; } div#d3 { width: 31%; float: right; } 

 <div id="main1" class="center border"> <p>Main</p> <div id="d1" class="border-thin"> <p>d1</p> </div> <div id="d2" class="border-thin"> <p>d2</p> </div> <div id="d3" class="border-thin"> <p>d3</p> </div> </div> 

Preview

Answer 2

That's due to the float elements. By default they are not included in other DIVs' height.

Add overflow: hidden; to #main1 . I know that sound strange, but it's working...