CSS overlapping error

[BeessFess]

I have a \[code\]<div>\[/code\] called big box that contains another \[code\]<div>\[/code\] called small box. Each small box contains an image and text wrapped inside a separate \[code\]<div>\[/code\] I also have a diagram to explain my situation.http://s21.postimg.org/4thwzlt9j/Untitled.jpgThe problem is when the text is larger than the div wrapping it. If I create another small box, It will overlap the above small box.How can I modify the CSS so if the elements such as the text go over the \[code\]<div>\[/code\] the small box won't overlap it.http://s18.postimg.org/kqkqlp6w9/Untitled.pngI don't want to use margin because it is fixed. What happens if one small box has only 3 words of text and there's a huge margin at the bottom?How can I make it dynamically, so if the text is bit over, the second small box won't overlap it but will instead adjust it's size so it will be at the bottom with space?\[code\] .bigbox {height: 700px; width: 950px; background:#FFFFFF; border-style:solid; border-color:#D5DADA; border-width:1px;} .smallbox {text-align:center; height:300px; width:250px; background: #FFB236; position:relative; left:0px;top:0px; margin-bottom: px;} .imagebox img{margin:6px 6px; padding-top:10px; padding-bottom:10px; padding-right:10px; padding-left:10px;}\[/code\]My HTML\[code\]<div class="bigbox"><div class="smallbox"><div class="i"><img border="0"src="http://stackoverflow.com/questions/15871197/im.jpg" alt=""> </div>This is the text and it is wrapped inside a div. </div><div class="smallbox"><div class="imagebox"><img border="0"src="http://stackoverflow.com/questions/15871197/im.jpg" alt=""> </div>This is the text and it is wrapped inside a div.</div>\[/code\]