floating divs not sitting properly

Question

The problem i am having is the footer div keeps going up behind the the right hand side div. i have a middle containing div with the 2 floated div's side by side and the footer is a separate div not to sure where i have gone wrong here but i have been at it for hours and cant work out the problem.

Here is a js fiddle of what i mean: http://jsfiddle.net/VU3xW/

HTML:

    <div id="middlecontainer">

        <div id="leftContent">

        </div> <!-- end of left content -->


        <div id="rightContent">

             </div> <!-- end of right content -->

</div> <!-- end of middle container -->

<div id="footer">
            <p class="footernav"><a href="">Home</a> | <a href="">About</a> | <a href="">Products</a> | <a href="">Contact</a>
            </p>

            <p class="copyright">Copyright © 2013 JBA Packaging Supplies | Designed by iDesign</p>
        </div> <!-- end of footer div -->

CSS:

    #rightContent{
    width: 690px;
    height: 400px;
    float: right;
    background-color:#222;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#leftContent{
    display: inline-block;
    width: 240px;
    height: 200px;
    background-color:#555;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#middlecontainer {
    width: 960px;
    background-color:#003;}

#footer {
    width: 960px;
    background-color: #121212;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#footer a{
    text-decoration: none;
    list-style-type: none;
    color:#888;
    }
#footer a:hover{
    text-decoration: none;
    list-style-type: none;
    color:#444;
    }

.footernav {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#444;
    padding-top: 10px;}

.copyright {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#888;
    padding-top: 10px;}

after each div that is floated, make a div with `style="clear: both;`, I think that will help you :) — Michael Unterthurner, Jul 16 '13 at 10:04

score 4 · Accepted Answer · edited May 23 '17 at 12:29

What you are missing is clearing the floating elements

Demo

Just add this <div style="clear: both;"></div> at the end of the container element, you can also clear the floats using overflow: hidden; for the parent div. Also for demo purpose I've added the styles inline, you can make a class out of it and use that instead of inline styles which is considered as bad practices..

Also if you want to clear the floating elements, you can use this to self clear the parent element.

.self_clear:after { /* Use this if you wish to ditch IE8 */
   content: " ";
   display: table;
   clear: both;
}

<div class="self_clear"> <!-- Example usage -->
   <div class="floated_left"></div>
   <div class="floated_right"></div>
</div>

This answer of mine will provide in detail explanation, that why you need to use clear: both;

thanks mate i was putting clear: both in the two floating divs but i will definatly give your explanation a read thanks for the heads up! — elroyz, Jul 16 '13 at 10:11

score 2 · Answer 2 · answered Jul 16 '13 at 09:54

2

Try adding a clearing div

    #clear{
    clear:both;
}

Here is the fiddle http://jsfiddle.net/swDnn/1/

Hope it helps...

answered Jul 16 '13 at 09:54

iJade

23,144
56
154
243

score 2 · Answer 3 · answered Jul 16 '13 at 09:57

try this

http://jsfiddle.net/VU3xW/4/

#rightContent{
    width: 690px;
    height: 400px;
    float: right;
    background-color:#222;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#leftContent{
    display: inline-block;
    width: 240px;
    height: 200px;
    background-color:#555;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#middlecontainer {
    width: 960px;
    background-color:#003;}

#footer {
    width: 960px;
    background-color: #121212;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#footer a{
    text-decoration: none;
    list-style-type: none;
    color:#888;
    }
#footer a:hover{
    text-decoration: none;
    list-style-type: none;
    color:#444;
    }

.footernav {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#444;
    padding-top: 10px;}

.copyright {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#888;
    padding-top: 10px;}

score 1 · Answer 4 · answered Jul 16 '13 at 09:53

1

Try giving your middlecontainer a overflow:auto property.

answered Jul 16 '13 at 09:53

Bitneko

123
1
1
7

score 1 · Answer 5 · answered Jul 16 '13 at 10:01

1

Your footer need clearing so add clear:both in #footer

 #footer {
    clear:both;
        width: 960px;
        background-color: #121212;
        text-align: center;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;}

answered Jul 16 '13 at 10:01

Gangadhar

1,739
15
19

perfectt! thank you i was using that in the two floating divs with no luck obviously still learning this whole thing atm appreciate the help. – elroyz Jul 16 '13 at 10:12

floating divs not sitting properly

5 Answers5