RESOLVED: Problem with adding 3rd column to Murder skin

Without looking at your code (at work, sorry), I remember I had similar issues before with a skin I had.  It was a padding issue.  I'm not at all sure how that skin works, but it looks like there's a fixed width general div that all the others are in.  Maybe try making your third column super skinny for a minute and see if it jumps up?  If it does, then you know it's probably a size/spacing issue.  If it doesn't, then it's something else with the CSS placement-wise.  (I'm thinking you might have got too much padding on your three columns for them to fit properly across the fixed width, though, as that was my issue before.)

yeah, i tried that, also tired making the page REALLY wide to see if it would jump up, and it wasn't working.  Anyone else have any bright ideas?  Thanks so much.

Could you post the relevant css and code snippet?

i fixed it at least temporarily by making the div id absolute positoned, but that doesnt work with the footer if the column gets too long.  here is the code I would like to fix:

Css:

#leftindex {
width: 200px;
float: left;
}

#rightindex {
margin-left: 220px;
width: 680px;
}

#adindex {
width: 180px;
        margin-left: 920px;
}

Here is the index.tpl:

<!-- INCLUDE BLOCK : header -->
<script src=""DWConfiguration/ActiveContent/IncludeFiles/AC_ActiveX.js"" type="text/javascript"></script>
<script src=""DWConfiguration/ActiveContent/IncludeFiles/AC_RunActiveContent.js"" type="text/javascript"></script>

<div id="leftindex">
      <div class="block">
      <div class="title">{info_title}</div>
      <div class="content">{info_content}</div>
  </div>
      <div class="block">
      <div class="title">Chat</div>
      <div class="content">{shoutbox_content}</div>
    </div>
    <div class="block">
    <div class="title">Music</div>
        <div class="content">
        <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_cf4e5e99-77a5-4666-82b0-e0cdfff04e4b"  WIDTH="120px" HEIGHT="300px"> <PARAM NAME="movie" VALUE=" http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Fdawnbrea-20%2F8014%2Fcf4e5e99-77a5-4666-82b0-e0cdfff04e4b&Operation=GetDisplayTemplate"><PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor" VALUE="#FFFFFF"><PARAM NAME="allowscriptaccess" VALUE="always"><embed src="" http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Fdawnbrea-20%2F8014%2Fcf4e5e99-77a5-4666-82b0-e0cdfff04e4b&Operation=GetDisplayTemplate" ;" id="Player_cf4e5e99-77a5-4666-82b0-e0cdfff04e4b" quality="high" bgcolor="#ffffff" name="Player_cf4e5e99-77a5-4666-82b0-e0cdfff04e4b" allowscriptaccess="always"  type="application/x-shockwave-flash" align="middle" height="300px" width="120px"></embed></OBJECT> <NOSCRIPT><A HREF="" http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822%2FUS%2Fdawnbrea-20%2F8014%2Fcf4e5e99-77a5-4666-82b0-e0cdfff04e4b&Operation=NoScript">Amazon.co m" Widgets</A></NOSCRIPT>
        </div>
        </div>
    <div class="block">
      <div class="title">{random_title}</div>
      <div class="content">{random_content}</div>
    </div>
    <div class="block">
      <div class="title">{recent_title}</div>
      <div class="content">{recent_content}</div>
    </div>
      <div class="block">
      <div class="title">{categories_title}</div>
      <div class="content">{categories_content}</div>
    </div>
</div>
<div id="rightindex">
<div class="block">
      <div class="title">Welcome</div>
      <div class="content">{welcome}</div>
    </div>
    <div class="block">
      <div class="title">{news_title}</div>
      <div class="content">{news_content}</div>
</div>
<div class="block">
<div class="title">Twilight News</div>
        <div class="content"><iframe width="700" height="400" src="" http://www.dawn-breaking.com/rss2html/rss2html.php" ;" frameborder=0></iframe>
    </div>
    </div>
</div>
<div id="adindex">

      <!-- <div class="image">
    </div>
    //-->
    <div class="block">
          <div class="content">
<script type="text/javascript"><!--
google_ad_client = "pub-0587531440696201";
/* Dawn Breaking 160x600, created 12/28/08 */
google_ad_slot = "8746909684";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="" http://pagead2.googlesyndication.com/pagead/show_ads.js"> ;"
</script>
    </div>

</div>

<!-- INCLUDE BLOCK : footer -->

Thanks!

This is how I did it in my other skins.

#leftindex { 
position:relative;
width: 180px;
float: left;
text-align: left;
}
#rightindex {
position:relative;
width: 180px;
float:right;
text-align: left;
}

#middleindex {
position:relative;
margin-left: 190px;
margin-right: 190px;
text-align: left;
}

Just remember that the side columns must always come first in the code.

Just to let you know, the third column on your site stretches the page. Why don't you make your main column smaller?

Ok, I fixed the problem by adding the following to the containing div (for me titled main page)

position:relative;

and then in the third column div adding:

position:absolute;
top:0;
right:0;

Thanks for all your help.

P.S.  I did end up shrinking the whole page width back down to 1000px