4

how can my containing div (boxes_blue) recognize the height of the items within?

#boxes_blue {
display: block;
margin: 0 0 0 175px;
border: 1px solid brown;
clear:  both; 
}

#boxes_blue_each {
float: right;
height: 100px;
width:  100px;
padding: 10px;
border-left: 3px solid #fff;
background-color: #004964;
color: #fffacf;
text-transform: uppercase;
text-align: left; 
}

<div id="boxes_blue"> <div id="boxes_blue_each">one</div> <div id="boxes_blue_each">two two</div> <div id="boxes_blue_each">three three three</div> <div id="boxes_blue_each">four four four four</div> </div>

mskfisher
  • 3,291
  • 4
  • 35
  • 48
sandraqu
  • 1,428
  • 1
  • 14
  • 31
  • Unfortunate to close and redirect to a question with a completely different title. If the asker knew about clearfix enough to search for it by name, they probably wouldn't have needed to ask this question. – Jaime Apr 03 '14 at 16:58

1 Answers1

4

This is happening because the divs that are contained all floated.

I am not sure why this is the way it is, but I know of a few solutions. Either set the containing div to have "overflow:hidden", or add another div below the floated divs with "clear:both". You could also, of course, set the height and width of the containing div as well.

Jay
  • 901
  • 1
  • 8
  • 18