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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    3 column div child problem

    Hello

    I am having a problem with a gap between the right column and the left and center columns on my page

    My 3 column div is to be a small table-like device INSIDE a body id div, because the body has a background image and everything.

    I have posted 2 images.
    This is how my site currently looks

    This is how I'd LIKE it to be:




    and this is my css code:
    #container {
    width: 100%;

    }

    #header {
    width: 1600px;
    height: 200px;
    position: relative;
    background-image: url(http://honeyradiance.org/Honeyradian...ader-img.jpg);
    border-bottom: 2px solid #33FFFF;
    }

    #horizontalnav {
    width: 1600px;
    height: 30px;
    position: relative;
    background-color: #000000;
    border-bottom: 2px solid #33FFFF;
    }


    .navlinks {
    position: absolute; top: 4px; left: 77px;
    }

    .navlinks ul {
    margin: auto;
    }

    .navlinks li {
    margin: 0px 30px 0px 0px;
    list-style-type: none;
    display: inline;
    }


    .navlinks li a {
    color: #66FF99;
    padding: 5px 12px 7px;
    text-decoration: none;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px
    }

    .navlinks li a:visited {
    color: #FF00CC;
    text-decoration: none;
    font-size: 16px

    }

    .navlinks li a:hover {
    color: #99FFFF;
    background-image: url(http://honeyradiance.org/Honeyradian...ouseover.jpg);
    text-decoration: underline;
    font-size: 16px;
    }

    #column-holder {
    width: 45%
    overflow: auto;
    margin: 10px auto;
    background-color: #00FFFF;
    padding: 10px;
    }

    #left {
    width: 200px;
    height: 400px;
    background-color: #000033;
    float: left;
    }

    #left p {
    color: #66FF99;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px
    }

    #center {
    width: 100px;
    height: 400px;
    background-color: #000033;
    }

    #center p {
    color: #66FF99;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px
    }
    #center a {
    color: #66FF99;
    text-decoration: underline;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px
    }
    #center a:visited {
    color: #FF00CC;
    text-decoration: underline;
    font-size: 16px

    }

    #center a:hover {
    color: #FFFF00;
    text-decoration: none;

    font-size: 16px;
    }

    #right {
    width: 100px;
    height: 400px;
    background-color: #000033;
    float: right;
    margin-bottom: 20px;
    }

    #right p {
    color: #66FF99;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px
    }
    #right a {
    color: #66FF99;
    text-decoration: underline;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px
    }
    #right a:visited {
    color: #FF00CC;
    text-decoration: underline;
    font-size: 16px

    }

    #right a:hover {
    color: #FFFF00;
    text-decoration: none;

    font-size: 16px;
    }




    #body {
    width: 100%;
    background-image: url(http://honeyradiance.org/Honeyradian...ckground.jpg);
    background-attachment: fixed;
    position: relative;
    overflow: auto;
    padding-left: 238px;
    padding-top: 20px;
    }



    #body p {
    color: #66FF99;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px
    }

    #body a {
    color: #66FF99;
    text-decoration: underline;
    font-family: "Gill Sans", sans-serif;
    font-size: 16px
    }
    #body a:visited {
    color: #FF00CC;
    text-decoration: underline;
    font-size: 16px

    }

    #body a:hover {
    color: #FFFF00;
    text-decoration: none;

    font-size: 16px;
    }








    h1 {
    color: #66FFFF;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 300%;
    }


    ul {
    margin-left: 25px;
    }

    img {
    border: none;
    }




    and this is my 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" lang="en" xml:lang="en">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Honey Radiance</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    </head>

    <body>
    <div id="container">

    <div id="header">
    </div>

    <div id="horizontalnav">
    <div class="navlinks">
    <ul>
    <li><a href="http://www.honeyradiance.org/">Home</a></li>
    <li><a href="http://www.honeyradiance.org/Archives">Archives</a></li>
    <li><a href="http://www.honeyradiance.org/chat-room">Chat Room</a></li>
    <li><a href="http://www.honeyradiance.org/farttalk-radio">Farttalk Radio</a></li>
    <li><a href="http://www.honeyradiance.org/Schism-Radio">Schism Radio</a></li>
    <li><a href="http://www.honeyradiance.org/Artwork">Artwork</a></li>
    <li><a href="http://www.honeyradiance.org/Video">Video</a></li>
    <li><a href="http://www.honeyradiance.org/Documentaries">Documentaries</a></li>
    <li><a href="http://www.honeyradiance.org/Library">Library</a></li>
    </ul>
    </div>
    </div>


    <div id="body">
    <h1>July 2011 Archives</h1>
    <p>Directions: Right click, choose "Save Target As."</p>
    <p>for those who have slower connections, we have 32k MONO archives</p>
    <p>For 32k MONO archives, scroll to the right. I'm still working on getting rid of the</p>
    <p>GAP between the "MONO" and "STEREO" columns</p>


    <table>
    <tr>
    <td><p>July 15, 2011 </p></td>
    <td><p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11.mp3">128K STEREO</a></p></td>
    <td><p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11-32k.mp3">32K MONO</a></p></td>
    </tr>
    </table>



    </table>
    <div id="left">
    <p>July 15, 2011</p>
    <p>July 11, 2011</p>
    <p>July 10, 2011</p>
    <p>July 8, 2011</p>
    <p>July 6, 2011</p>
    <p>July 5, 2011</p>
    <p>July 3, 2011</p>
    <p>July 1, 2011</p>
    </div>
    <div id="right">
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11-32k.mp3">32K MONO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-11-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-11-11-32k.mp3">32K MONO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-10-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-10-11-32k.mp3">32K MONO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-8-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-8-11-32k.mp3">32K MONO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-06-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-06-11-32k.mp3">32K MONO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-5-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-5-11-32k.mp3">32K MONO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-3-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-3-11-32k.mp3">32K MONO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-1-11-32k.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-1-11-32k.mp3">32K MONO</a></p>
    </div>

    <div id="center">
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-15-11.mp3">128K STEREO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-11-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-11-11.mp3">128K STEREO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-10-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-10-11.mp3">128K STEREO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-8-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-8-11.mp3">128K STEREO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-06-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-06-11.mp3">128K STEREO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-5-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-5-11.mp3">128K STEREO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-3-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-3-11.mp3">128K STEREO</a></p>
    <p><a href="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-1-11.mp3" target="http://honeyradiance.org/Honeyradiance/Data/July-2011-Archives/hr-7-1-11.mp3">128K STEREO</a></p>
    </div>



    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    </div>

    </div>

    </body>

    </html>

    I'm wondering what im doing wrong. I've changed order of floats, I've changed floats from left to right and back and forth, and tried all kinds of things, and , still, nothing works.

    Please help

    Thanks

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Dont give width of #body to 100%...

    Because of this only your 3rd column floating towards right of the screen.

    Give width in px according to child div's width.



  • Users who have thanked vikram1vicky for this post:

    honeyradiance (07-18-2011)

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Well, first off, you need to arrange your divs in the correct order in your html by placing your left div first, center div next, and your right div after. In your css, you put the body div as 100%width there for when you use floats it will go all the way to the side you float it on. You have several options to solve this problem. First, you can give your body div a set width as in pixels such as 450 px, enough to contain all three divs(left, center, and right). Or, you can remove the floats and place display:inline; in your css under the left, right, and center divs.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • Users who have thanked Chris Hick for this post:

    honeyradiance (07-18-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, so I abandoned div's as a way to tabulate my data and decided to use Tables instead because I did not want to resize my #body down to a small size (and all my background images with it)

    The problem I am having now is the CSS that I write isn't showing up in the browser.

    When I look at the index.html file that is on the server, it looks the way I want it to

    But when I clear my cache and try to go to the site, the border and background on the table is missing


    When I view the CSS file in Page Source on the browser, it is different than the CSS file I uploaded

    This is true in both firefox AND chrome
    Last edited by honeyradiance; 07-18-2011 at 02:28 PM. Reason: wanted to include pics

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here's how the table appears as it exists in the index.html page that is on the server:





    And here's how it actually looks when loaded on a browser (even after the cache is cleared) (Incorrect)




    See....its like the code is being uploaded to the server, but its not registering on browsers

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    could very well be a server issue. what is your server provider? my first guess would be cache, but if you cleared it, then its probably a server problem

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Check if you have updated CSS file on server or not...


  •  

    Tags for this Thread

    Posting Permissions

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