CODEWITHSUNDEEP
htmlcsscss-float
elroyz
elroyz

Reputation: 113

floating divs not sitting properly

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;}

Upvotes: 2

Views: 228

Answers (5)

Gangadhar
Gangadhar

Reputation: 1749

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;}

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

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;}

Upvotes: 2

iJade
iJade

Reputation: 23791

Try adding a clearing div

    #clear{
    clear:both;
}

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

Hope it helps...

Upvotes: 2

Bitneko
Bitneko

Reputation: 123

Try giving your middlecontainer a overflow:auto property.

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157304

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;

Upvotes: 4

Related Questions