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
    Jan 2011
    Location
    Oregon
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Stationary Sidebars?

    So I'm using a mixture of CSS and HTML coding to build a website.
    I should be more reluctant to do this, but here is a basic code to a page:


    <html>
    <head>
    <title>Faraway Forest</title>

    <style type="text/css">


    body {
    color:#FFFFFF;
    font-family:verdana, arial, helvetica;
    font-size:12pt;
    background-color:#345437;
    background-image: url("http://i338.photobucket.com/albums/n418/dragon-samo/background-1.png");
    margin:0px 0 0px 0;
    }


    td {
    color:#FFFFFFFF;
    font-family:verdana, arial, helvetica;
    font-size:12pt;
    vertical-align:left;
    div-align:"top";
    padding:10px;
    }


    a:link, a:visited {
    text-decoration:none;
    color:#DEE5AE;
    }

    a:active, a:hover {
    text-decoration:none;
    color:#FFFFFF;
    }

    img {
    border:0px;
    }



    #header {
    text-align:left;
    background-image: url("http://i338.photobucket.com/albums/n418/dragon-samo/banner-bg.png");
    border:0px;

    }

    #leftmenu {
    width:200px;
    padding:0px 0 0 10;
    background-image: url("http://i338.photobucket.com/albums/n418/dragon-samo/sidebar-3.png");
    height: 100%;
    float:left;
    }


    #content {
    padding:20px;
    background-color:#6d8c6d;
    border:5px solid #393f39;
    color:#0f100f;
    background-image:url("http://i338.photobucket.com/albums/n418/dragon-samo/contentboxbg-2.png");
    width:800px;
    height:100%;
    }

    #rightmenu {
    padding:0px 0 0 0;
    width:211px;
    background-image: url("http://i338.photobucket.com/albums/n418/dragon-samo/sidebar-right-3.png");
    float:right;
    height:100%;
    }



    #footer {
    clear:both;
    padding:1px;
    background:#181818;
    font-size:7pt;
    color:#666666;
    }



    </style>

    </head>
    <body>
    <div align="left">
    <table id="layout" cellspacing="0">
    <tr>

    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/banner-9.png">
    </td>
    </tr>

    <tr>
    <td id="leftmenu"><div align="top"><body background="http://i338.photobucket.com/albums/n418/dragon-samo/sidebar-3.png">


    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/sitely.png"><br>
    <a href="url">>>Home</a><br>
    <a href="url">>>Updates</a><br>
    <a href="url">>>FAQ</a><br>
    <a href="url">>>Staff</a><br>
    <a href="url">>>Link to Us</a><br>
    <a href="url">>>Affiliate</a><br>

    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/interactive.png"><br>
    <a href="url">>>Oekaki</a><br>
    <a href="url">>>Forums</a><br>
    <a href="url">>>Chat</a><br>
    <a href="url">>>Contact Us</a><br>
    <a href="url">>>Our Mascot</a><br>

    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/roleplay.png"><br>
    <a href="url">>>R.P. Oekaki</a><br>
    <a href="url">>>Weapon Shop</a><br>
    <a href="url">>>Wardrobe Shop</a><br>
    <a href="url">>>Species Ref.</a><br>
    <a href="url">>>How it works</a><br>

    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/fun.png"><br>
    <a href="url">>>Don't Click!</a><br>
    <a href="url">>>Ask Krackle</a><br>
    <a href="url">>>Advice</a><br>
    <a href="url">>>Celeb <br> ***Photoshop</a><br>
    </p>
    </td>

    <td id="content">


    <center><h2><font color="cce5cc">Staff Members</font></h2><br><hr><hr><br>

    <h3><font color="cce5cc">Artists</font></h3><br>
    Samuel D. Marcus<hr><br><br><br>

    <h3><font color="cce5cc">Website Design</font></h3><br>
    Samuel D. Marcus<br><br>

    Kylie S. DeHart<hr><br><br>

    <h3><font color="cce5cc">Website Development</font></h3><br>
    Samuel D. Marcus<br><br>
    Kady C.<br><br>
    And a special thanks to Lily R. for the website's skeleton<hr><br><br><br>

    <h3><font color="cce5cc">Honorable Mentions</font></h3><br><br>
    Olivia C.-(A.k.a. <i>Mystical-Kitsune</i>)<br><br>
    <i>Kistune-Chan/Zero</i><br><br>
    <i>Princess</i><br><br>
    <i>Dark Haven</i><br></center>


    <hr /><hr />
    </td>

    </div>



    <td id="rightmenu">
    <div align="right"><img src="http://i338.photobucket.com/albums/n418/dragon-samo/right-top-1.png"><center>
    <div align="right"></div>
    <a href="url">Link</a><br>
    <a href="url">Link</a><br>
    <a href="url">Link</a><br>
    <a href="url">Link</a><br>
    <a href="url">Link</a><br>

    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/shoutbox.png">
    <!-- BEGIN CBOX - www.cbox.ws - v001 -->
    <div id="cboxdiv" style="text-align: center; line-height: 0">
    <div><iframe frameborder="0" width="150" height="267" src="http://www4.cbox.ws/box/?boxid=3865247&amp;boxtag=fj0k7m&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#020205 1px solid;" id="cboxmain"></iframe></div>
    <div><iframe frameborder="0" width="150" height="133" src="http://www4.cbox.ws/box/?boxid=3865247&amp;boxtag=fj0k7m&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#020205 1px solid;border-top:0px" id="cboxform"></iframe></div>
    </div>
    <!-- END CBOX -->


    </center>
    </tr>


    </table>

    <div id="footer">
    <center><b>Copyright Notice</b>
    <br>Unless otherwise stated,all images are drawn by Sam M (a.k.a. xTWILIGHTx). <br>
    Do not use any original content from this site without written consent from the owners.<br>
    <sub>Faraway Forest and all things related to it are 2007-2010 Samuel D. Marcus & Kylie S. DeHart</sub></p>
    <p></center>
    </p>
    </div>

    </div>
    <!-- --><script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script></body>
    </html>


    Can anyone help me to figure out why stretching the content box moves the sidebars?
    If I have less text, the layout is fine, but I'm using this site for a lot of content.

    Also while we're at it, The content box is a part of a table. I want to be able to have boxes surround different updates. Sort of like http://suta-raito.com but not as complex. If I try to wrap the content around the td tags, it divides it into columns, which is not at all what I want.

    Thanks in advance for whatever help I receive.

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Have you tried height: auto; you are using height 100% so it will stretch.


  •  

    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
    •