Div Positioning is not as Expected - php

Question

I have the following PHP page
<?php include 'header-adminpanel.php'; ?>
<div class="container">
<div class="body-content">
<div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
<div class="side-right"></div>
</div>
</div>
<?php include 'footer.php'; ?>
Where I expected the output as
But the real output is
Styling is as follows;
.side-left{
width: 250px;
float: left;
height: auto;
}
.side-right{
width: 750px;
float: left;
height: auto;
}
.body-content{
height:auto;
width: 1000px;
margin:auto;
}
.container {
height: auto;
width: 100%;
}
Without those "side-left" and "side-right" divs it looks fine as below
What's wrong with my code? Any Suggestions..

Answer 1

You should add this before including footer. That should solve the things.
<div style="clear:both"></div>

Answer 2

Add
<div style="clear:both"></div>
before the line,
<?php include 'footer.php'; ?>

Answer 3

You are using floated elements and they collapsed as there is no content.
Add clearfix to body-content.
Also take a look at Why doesn't the height of a container element increase if it contains floated elements? and What does the CSS rule clear: both do?

Answer 4

add Clear both before footer div, Try the following
<?php include 'header-adminpanel.php'; ?>
<div class="container">
<div class="body-content">
<div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
<div class="side-right"></div>
</div>
</div>
<div style="clear:both"></div>
<?php include 'footer.php'; ?>
Example

Answer 5

The only reason that the footer is sliding to the right side of the '.container' is because '.container' div's child have a float property.
So for a quick fix add 'clear:both' to the '.container' div and also to the footer div or empty div.
If this does not fix the problem we need to see the footer, side-left and slid-right html.

Answer 6

Here is Two Solution
First Clearing Floats Using Clear:both
And Another Adding Overflow: auto to Parent div
HERE IS CODE
HTML :
<div class="body-content">
<div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
<div class="side-right"></div>
<div style="clear:both"></div>
</div>
Another solution is
Just adding a css
.body-content{
overflow:auto;
}
Hope it helps you :)