Div items out of div

Question

I am fairly new html developer, i am using bunch of divs in my page.

Issue is some of div items are not within div although they are defined within div tag.

What am i missing here to understand? How to make sure that all items within div will get rendered within div?

Answer 1

No code? Time to get the crystal ball out then…

You are either absolutely positioning them (which takes them out of normal flow) or floating them, which stops them from influencing the height of the container. There are a number of ways to force containers to wrap floating content.

Answer 2

It looks like you have a container that has a child that floats, that is why the parent div collapses.

<div id="parent" title="this collapses">
  <div style="float:left" title="child div"></div>
</div>

I think your problem is that the parent collapses.

The solution would be one of the following

1. float that parent div (where possible).
2. add a style overflow:hidden or auto to the parent div.
3. add a class of clearFix* to the parent div(see below).
4. set a height (where possible).

*clearfix:

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}