Div Positioning is not as Expected

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 enter image description here

But the real output is enter image description here

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 enter image description here

What's wrong with my code? Any Suggestions..

score 2 · Accepted Answer · answered Feb 03 '14 at 05:32

2

You should add this before including footer. That should solve the things.

<div style="clear:both"></div>

answered Feb 03 '14 at 05:32

Dirgh

507
4
13

1

generally when you give float styles to div it is a genral solution whenever you come across things like this.. – Dirgh Feb 03 '14 at 05:38

score 1 · Answer 2 · answered Feb 03 '14 at 05:33

1

Add

<div style="clear:both"></div>

before the line,

<?php include 'footer.php'; ?>

answered Feb 03 '14 at 05:33

Jenz

8,280
7
44
77

score 1 · Answer 3 · edited May 23 '17 at 11:56

1

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?

edited May 23 '17 at 11:56

Community

1
1

answered Feb 03 '14 at 05:35

Michal Brašna

2,293
13
17

score 1 · Answer 4 · answered Feb 03 '14 at 05:38

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

score 0 · Answer 5 · answered Feb 03 '14 at 05:40

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.

score 0 · Answer 6 · answered Feb 03 '14 at 05:41

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 :)

Div Positioning is not as Expected

6 Answers6