Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    floating divs-lost background of maincontent

    Hello,
    I am taking an html/css class. I have to create a website using notepad. This is a real site for work. I haven't had much luck with getting help from the instructor. My index page looked fine until I floated 3 divs on the page. Then I lost the maincontent background. I have validated with firebug and have only issues with a poll script i copied and curved divs.

    Here is a link to the site:
    http://www.graph-art.matc.edu/olguin...nal/index.html

    Thanks for the help!
    Miss Debbie

    [CODE]








    #header {
    margin: 20px;
    margin-bottom: 0;
    text-align: center;
    width: 920px;
    height:280px;
    border: 4px solid #00ff00;
    background-color: #000000;
    background-image: url(images/header.png);
    background-repeat: no-repeat;

    }

    #navigation {
    text-align: center;
    background-color: #ff8000;
    border: 4px solid #808080;
    width:920px;
    height:50px;
    margin: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #808080;
    padding-top: 10px;

    }






    .clearfloat {
    clear:both;
    height: 0;
    font-size: 1px;
    }

    body {
    font-family: Verdana, Geneva, sans-serif;
    background-image: url(images/graffit_bg2.png);
    background-repeat: repeat;
    }


    #container {

    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 920px;
    position:relative;
    font: 12px Arial, sans-serif;
    text-align: left;
    }

    #maincontent {
    margin:20px;
    margin-bottom: 0;
    margin-top: 0;
    width: 920px;
    background: #FFFFFF;
    font-size: 14px;
    font-family: Arial, sans-serif;
    border: 4px solid #00ff00;
    border-bottom: none;
    text-align: center;

    }

    #sidebar {
    float: left;
    width: 12em;
    }


    #bookreview {

    float: left;
    width: 400px;
    padding: 5px;
    border: 4px solid #ff8000;
    font-size: 16px;
    font-family: Verdana, sans-serif;
    margin: 20px;
    height: 300px;
    overflow: auto;
    text-align: left;
    -moz-border-radius: 15px;
    border-radius: 15px;
    }

    #booklist {

    clear: both;
    width: 400px;
    padding: 5px;
    border: 4px solid #ff8000;
    margin: 20px;
    text-align: left;
    -moz-border-radius: 15px;
    border-radius: 15px;
    }

    ul
    {
    list-style-type: none;
    }

    #bkbrochures {
    float: right;
    width: 400px;
    padding: 5px;
    border: 4px solid #ff8000;
    margin: 20px;
    height: 300px;
    overflow: auto;
    text-align: left;
    -moz-border-radius: 15px;
    border-radius: 15px;
    }

    #magneticbd {
    width: 400px;
    float: left;
    }

    #bookshelf {
    clear:left;
    width:295px;
    float:right;
    margin:1px;
    margin-right: 0px;
    padding: 0px;
    border: 0px;
    }

    #locker {
    width:620px;
    float:right;
    margin: 1px;
    margin-left: 0px;
    padding: 0px;
    border: 0px;
    }




    #footer {


    margin:20px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    width: 920px;
    border: 4px solid #808080;
    background-color: #00ff00;
    font: 14px Arial, sans-serif;
    }


    [CODE]

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    wrap your code with [code] and [/code]


    the <br class="clearfloat" /> needs to below the float
    btw, all the comments don't help with sorting the code, it actually makes it harder to read

    Last edited by Sammy12; 11-21-2011 at 03:30 AM.


  •  

    Posting Permissions

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