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
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts

    Div float problem

    Ok, this is the first time I've ever actually used floats, so maybe I'm missing something, but this is what I have so far:

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>About Us</title>
        <link href="styles.css" rel="stylesheet" media="screen" type="text/css" />
    </head>
    
    <body>
    
    <div id="contentwrapper">
        <div id="banner"><img src="images/Banner.jpg" width="556" height="120" alt="Banner Image" /></div>
    
        <br />
    
        <div id="navwrapper">
            <a href="index.html" id="btn_home"></a>
            <a href="about.html" id="btn_about"></a>
            <a href="sponsors.html" id="btn_sponsors"></a>
            <a href="progress.html" id="btn_progress"></a>
            <a href="first.html" id="btn_first"></a>
            <a href="contact.html" id="btn_contact"></a>
        </div>
    
        <div id="textarea">
           -text removed-
        </div>
    
        <div id="borderleft"></div>
        <div id="borderright"></div>
    
    </div>
    
    
    </body>
    </html>
    CSS:
    Code:
    /* CSS Document */
    
    * {
        padding:0px;
        margin:0px;
    }
    
    body {
        background-color:#000000;
        font-family:"Trebuchet MS";
        font-size:14px;
        color:#FFFFFF;
    }
    
    img {
        border:none;
    }
    
    #banner {
        position:absolute;
        left:12%;
        top:0px;
    }
    
    #contentwrapper {
        background-color:#000000;
        position:absolute;
        top:auto;
        left:20%;
        margin-left:-5%;
        width:716px;
        height:80%;
    }
    
    #textarea {
        background-color:#000000;
        position:absolute;
        top:200px;
        left:15%;
        width:470px;
        height:70%;
        z-index:2;
    }
    
    #borderleft {
        background-image:url(images/border-left.jpg);
        background-repeat:repeat-y;
        width:40px;
        height:80%;
        float:left;
        clear:left;
        position:absolute;
        top:140px;
    }
    
    #borderright {
        background-image:url(images/border-right.jpg);
        background-repeat:repeat-y;
        width:40px;
        height:80%;
        float:right;
        float:right;
        position:absolute;
        top:140px;
    }

    The left image works fine, but the right does not display... Any ideas?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Don't mix float with position:absolute;
    In your case one is positioned over another.
    If you choose position:absolute;, then use left: or right:, but you may have to put them inside a relatively positioned element.

    PS: Assume you are talking about #borderleft and #borderright
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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