www.webdeveloper.com
Results 1 to 6 of 6

Thread: Floating Divs show below bottom of site

  1. #1
    Join Date
    Oct 2007
    Posts
    10

    Floating Divs show below bottom of site

    Why is it that once I float my divs, the bottom of the webpage doesn't display AFTER the floating divs? They show on top of the bottom of the site . I am a beginner with Divs. Any help would be greatly appreciated!


    Here is an what the site looks like http://www.worealmedia.com/blackhawks/indextest.html

    And the Code:

    CODE
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel=stylesheet href="styleSheets/style.css" type="text/css" media=screen>
    <title>BC Blackhawks - AAA Spring Hockey Club</title>
    </head>

    <body>
    <div id="main">

    <img src="images/banner.png" />

    <div id="nav"><script type="text/javascript" src="scripts/nav.js"></script>
    <a href="index.html" onmouseover="over_button()" onmouseout="up_button()" ><img src="images/nav_01.png" alt="BC Blackhawks Home" name="buttonOne" /></a><a href="BC_Blackhawks_Spring_Hockey_Club.html" onmouseover="over_button2()" onmouseout="up_button2()" ><img src="images/nav_02.png" alt="BC Blackhawks About Us" name="buttonTwo" /></a><a href="BC_Blackhawks_Camps.html" onmouseover="over_button3()" onmouseout="up_button3()" ><img src="images/nav_03.png" alt="BC Blackhawks Camps" name="buttonThree" /></a><a href="BC_Blackhawks_Teams.html" onmouseover="over_button4()" onmouseout="up_button4()"><img src="images/nav_04.png" alt="BC Blackhawks Teams" name="buttonFour" /></a><a href="BC_Blackhawks_Contact.html" onmouseover="over_button5()" onmouseout="up_button5()"><img src="images/nav_05.png" alt="BC Blackhawks Contact Us" name="buttonFive" /></a>
    </div>
    <div id="navspace"></div>
    <div id="wrapper">
    <div id="spacer"></div>

    <div id="contenttext" style="width:180px; float:left;">
    <img src="images/sponsors.png" />
    <p>These
    <br />
    Are our sponsers</p>
    </div>

    <div id="contenttext" style="width:361px; float:right;"><img src="images/aboutus.png" /></div>


    <div style="width:900px; background-color:#FFFFFF">Hi</div>
    </div>

    </div>
    </body>
    </html>







    STYLE

    body {
    margin: 25px 0px;
    padding: 0px;
    text-align: center;
    background-color:#000000;
    color:#FFFFFF;
    font-family:Calibri, Arial, Helvetica, sans-serif;
    font-size:14px;
    }


    div#main {
    width: 900px;
    margin: 0px auto;
    text-align: left;
    padding: 0px;
    border: 15px solid #171717;
    background-color: #000000;
    }

    div#navspace {
    background-color:#000000;
    height:20px;
    width:900px;

    }

    div#contenttext {
    background-color:#333333;
    }

    div#wrapper {
    margin:0 auto;
    width:900px;
    }

    div#spacer {
    clear: both;
    }




    a {
    color:#333333;
    border: none;
    padding:0px;
    padding:0px;
    border:none;
    margin:0px;
    }


    img {
    padding:0px;
    border:none;
    margin:0px;


    }

    #nav {
    height:40px;
    width:900px;
    padding:0px;
    border:none;
    margin:0px;

    }

  2. #2
    Join Date
    Jul 2009
    Location
    My house, sitting at the computer. Duh!
    Posts
    118

  3. #3
    Join Date
    Oct 2007
    Posts
    10
    Thanks. I have the clear where it says <div id="spacer"></div>.
    Is this in the wrong spot?

  4. #4
    Join Date
    Oct 2007
    Posts
    10
    I had it above and moved it below the floats. WORKS!
    Thanks a lot. Div Noob here.

  5. #5
    Join Date
    Jul 2009
    Location
    My house, sitting at the computer. Duh!
    Posts
    118
    You're spacer div should go below the content.

  6. #6
    Join Date
    Jul 2009
    Location
    My house, sitting at the computer. Duh!
    Posts
    118
    Glad you fixed it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles