Identical divs not stacking rather overlapping
css, html, twitter-bootstrap
Solution
The problem appears to be setting the `position:absolute` on the wrappers. This removes your content from the semantic flow of the document altogether, and the remaining content will flow to the top to fill the gap, hence the 'overlap' effect.
Here's a Fiddle of your situation with `position:absolute;` commented out.
If you wanted to float the images in each container side by side without specifying a height for the parent container, you need to apply `overflow:hidden` to the parent.
Problem
I have a div that is going to hold some content and i will be replicating the div several times below. When i repeat the div multiple times, i see the content overlapping each other and not stacking. On inspecting, i can see the height of the container is not set. Will the height not get set depending on the content inside the div? I was under that impression and not sure where i am now. Here's my fiddle. http://jsfiddle.net/5jq52/2/ ``` <div class="row"> <div class="col-md-5"> <div class="Mycontainer"> <div class="Item1"> <img src="http://placehold.it/150x150" class="Pic"> </div> <div class="Item2"> <img src="http://placehold.it/150x150" class="Pic"> </div> </div> <div class="Mycontainer"> <div class="Item1"> <img src="http://placehold.it/150x150" class="Pic"> </div> <div class="Item2"> <img src="http://placehold.it/150x150" class="Pic"> </div> </div> </div> </div> ``` Thanks a ton for reading and resolving. ;)